Add column table with javascript and condition

Question

Add column table with javascript and condition

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have this function that sums the fields of a column of table and works perfectly:

let result = 0;
    let columns = $("#tablepesquisaprodutos tr td:nth-child(" + 8 + ")");

    columns.each(i => {
        result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
    });

But the need arose to add only the fields where column 19 is true, how can I do all this in the same function? Detail: In this case it is a dynamic%%, which is filled in by jquery.

This is the HTML of table

<table class="table table-responsive table-hover table-striped" id="tablepesquisaprodutos" style="font-size:12px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Código</th>
                            <th>Descrição</th>
                            <th>Qtd</th>
                            <th>Preço Un.</th>
                            <th>Desc %</th>
                            <th>Desc R$</th>
                            <th>Total</th>
                            <th>ICMS</th>
                            <th>Alíquota</th>
                            <th>V.ICMS</th>
                            <th>%ISS</th>
                            <th>V.ISS</th>
                            <th>%IPI</th>
                            <th>V.IPI</th>
                        </tr>
                    </thead>
                    <tbody><tr class="item"><td><input type="checkbox" class="link-check" onchange="cbChange(this);"></td>
                        <td>P00082</td>
                        <td>teste</td>
                        <td>1</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>1</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td>0,00</td>
                        <td style="display: none;">1</td>
                        <td style="display: none;">82</td>
                        <td style="display: none;">08/11/2018</td>
                        <td style="display: none;">true</td>
</tr></tbody>
                </table>

javascript jquery

asked by anonymous 07.11.2018 / 20:06

2 answers

0

/*Filtra apenas os trs que possuem true como texto interno*/
let trs = $('#tablepesquisaprodutos tr').filter((i, e) => $(e).find('td:nth-child(19)').html() === 'true');

/*Encontra o oitavo elemento da coluna*/
let columns = trs.find('td:nth-child(8)');

07.11.2018 / 21:02

How to use wp_enqueue_style? open a modal and close the other

score 2 · Accepted Answer

You can use :contains() to select all rows where column 19 contains the text " true ". And using .siblings() will select the specified sister column (in this case, column 8).

The : contains () selects all elements that contain a given text. This way you do not need to create a function with filter() .

So you do not have to change anything in your code, just the selectors of the columns variable:

let result = 0;
let columns = $("#tablepesquisaprodutos tr")
               .find("td:nth-child(19):contains('true')") 
               .siblings("td:nth-child(" + 8 + ")");

columns.each(i => {
   console.log($(columns[i]).html());
   result += parseFloat($(columns[i]).html().replace(/\./g, '').replace(',', '.'));
});