Add filtered values from an html table with jquery

Asked

Viewed 381 times

0

I have a tbody mixed tr of these:

<tr class="odd">

    <td class="id-despesa">
        <p class="orig">
            <?php echo $exibe2->id ?>
        </p>
    </td>
    <td class="data-despesa">
        <p class="orig">
            <?php echo $exibe2->data ?>
        </p>
    </td>
    <td class="funcionario-despesa">
        <p class="orig">
            <?php echo $exibe2->funcionario ?>
        </p>
    </td>
    <td class="valor-rep">
        <p class="orig">
            <?php echo $exibe2->valorRep ?>
        </p>
    </td>
</tr>

As you can see, the table data is being pulled from the BD, but finally, what I need is to add all the values of the td’s with class rep value where staff-expenditure is equal to "x". It would be the equivalent of this in PHP: SELECT value-rep FROM table WHERE employee-expense=='x' and then add up all the received values, I think they got to mean what I meant by that comparison.

I already have a function to add up all the values of rep value as you can see:

var valorComSoma = 0;
$('#boxCom .valor-rep').each(function (i) {   
    valorComSoma = parseFloat($(this).text().replace(/[^0-9]/g, '')) +valorComSoma;
});

I would need to sort of add a filter to that function or something like that, as I mentioned earlier.

1 answer

0


Functional example. Explanation : Taking all the TR’s and checking which one is type 'X' and adding only those that meet the same.

$(function(){
  var total = 0;
  $('tr').each(function(){
    var funcDespesa = $(this).find('.funcionario-despesa > p').text().trim();
    if(funcDespesa === 'x'){
      total += parseInt($(this).find('.valor-rep > p').text().trim());
    }
  });
  
  $('.total').html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="odd">

    <td class="id-despesa">
        <p class="orig">
            AAAA
        </p>
    </td>
    <td class="data-despesa">
        <p class="orig">
            99/99/9999
        </p>
    </td>
    <td class="funcionario-despesa">
        <p class="orig">
            x
        </p>
    </td>
    <td class="valor-rep">
        <p class="orig">
            50
        </p>
    </td>
</tr>
<tr class="odd">

    <td class="id-despesa">
        <p class="orig">
            AAAA
        </p>
    </td>
    <td class="data-despesa">
        <p class="orig">
            99/99/9999
        </p>
    </td>
    <td class="funcionario-despesa">
        <p class="orig">
            y
        </p>
    </td>
    <td class="valor-rep">
        <p class="orig">
            130
        </p>
    </td>
</tr>
<tr class="odd">

    <td class="id-despesa">
        <p class="orig">
            AAAA
        </p>
    </td>
    <td class="data-despesa">
        <p class="orig">
            99/99/9999
        </p>
    </td>
    <td class="funcionario-despesa">
        <p class="orig">
            x
        </p>
    </td>
    <td class="valor-rep">
        <p class="orig">
            260
        </p>
    </td>
</tr>
</tbody>
</table>
<div class="total">
</div>

Browser other questions tagged

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