Adding filtered values from an html table with jquery

Question

Adding filtered values from an html table with jquery

Navigation

#1 by (0 votes)

0

I have a tbody with several 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 DB, but what I need is to add all the values of the td's with class rep-value where official- / strong> is equal to "x". It would be the equivalent of this in PHP: SELECT value-rep FROM table WHERE official-expense == 'x' and then sum all the received values, I think they managed to understand what he meant by this comparison.

I already have a function to add all 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'd rather have to add a filter to this function or something like that, as I mentioned earlier.

javascript jquery

asked by anonymous 26.06.2017 / 16:21

1 answer

jquery ajax issues Doubt on how to use "!=" [duplicate]

score 0 · Accepted Answer

Functional example. Explanation: Taking all TR's and checking which is of 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><trclass="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>