Add table column with javascript and condition

Asked

Viewed 376 times

1

I have this function which 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 is a table dynamic, which I fill 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

  • You can use the jQuery filter. .

  • @Andre I fill this table dynamically by jquery, I will edit the answer.

  • Open the developer tools and copy the already rendered HTML from your page. The solution will depend on how this "false" is represented. What does this "Type" variable contain? Is it a boolean? A checkbox?

  • It is string type, I need to check if it is true or false. As I explained the table is filled dynamically.

  • But no matter if the table is populated dynamically, you can take its HTML with the developer tools. Add a row to it, press F12, locate the table in your HTML and copy it.

  • @Andre ready. I edited the question. I need to add the total column, according to the condition of the last column, if it is false and if it is true.

Show 1 more comment

2 answers

2


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 containing a particular text. This way you do not need to create a function with filter().

So you don’t need to change anything in your code, just the variable selectors columns:

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(',', '.'));
});

  • Got it, didn’t know the :contains(), thank you very much, it worked perfectly, it is always good to know more things.

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)');

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.