How to sum the elements of the same class of a group of tables

Question

How to sum the elements of the same class of a group of tables

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

Hi, I have been given a correct answer on a very similar question, but I have missed this detail that I can not solve ... how to add the elements of the same class from a group of tables ...

Example:

JSFiddle

HTML:

<table>
    <tr>
        <td id="tabela">
            <input type="text" id="tabelainput" class="janmembros" maxlength="3" name="janmembros" value="1" disabled>
        </td>
        <td id="tabela">
            <input type="text" id="tabelainput" class="janvisitantes" maxlength="3" name="janvisitantes" value="3" disabled>
        </td>
        <td id="tabela3" class="jantotal">
        </td>
    </tr>
</table>

<table>
    <tr>
        <td id="tabela">
            <input type="text" id="tabelainput" class="janmembros" maxlength="3" name="janmembros" value="1" disabled>
        </td>
        <td id="tabela">
            <input type="text" id="tabelainput" class="janvisitantes" maxlength="3" name="janvisitantes" value="2" disabled>
        </td>
        <td id="tabela3" class="jantotal">
        </td>
    </tr>
</table>

<table>
    <tr>
        <td id="tabela">
            <input type="text" id="tabelainput" class="janmembros" maxlength="3" name="janmembros" value="1" disabled>
        </td>
        <td id="tabela">
            <input type="text" id="tabelainput" class="janvisitantes" maxlength="3" name="janvisitantes" value="5" disabled>
        </td>
        <td id="tabela3" class="jantotal">
        </td>
    </tr>
</table>

<table>
    <tr>
        <td id="tabela">
        </td>
        <td id="tabela">
        </td>
        <td id="tabela3" class="total">
        </td>
    </tr>
</table>

JQuery:

if ( $( ".janmembros" ).val() != '' && $( ".janvisitantes" ).val() != '' )
{
    $('table').each(function() {
        var $this = $(this),
            janmembros = parseInt($this.find( ".janmembros" ).val()),
            janvisitantes = parseInt($this.find( ".janvisitantes" ).val());

        $this.find( ".jantotal" ).html( janmembros+janvisitantes );
        $( ".total" ).html($this.find( ".jantotal" ).html()); // essa linha deveria somar todos as classes .jantotal, mas só soma a última...
    });

}

EDIT:

After the help of @Sergio I was still unable to solve the problem, follow the JSFiddle with new information of the problem: JSFiddle
There are two divs with the tables inside and I need the sum of each of the divs ... I need to skip to the next sum of the next div!

jquery

asked by anonymous 04.07.2014 / 00:02

2 answers

2

I was able to do the following:

JSFiddle

$('div').each(function() {
    var somatorio = 0;
    $('table', this).each(function (i) {
        var $this = $(this),
            janmembros = parseInt($this.find('.janmembros').val() || '0', 10),
            janvisitantes = parseInt($this.find('.janvisitantes').val() || '0', 10);
        $this.find('.jantotal').html(janmembros + janvisitantes);
        somatorio += parseInt($this.find( ".jantotal" ).html() || '0', 10);
    });
    $('.total', this).html(somatorio);
});

04.07.2014 / 04:08

Workaround problem with hot development in Java? println on Swift through the terminal

score 4 · Accepted Answer

First, and as @Zuul mentioned, you need to get rid of those duplicate IDs in case these tables are on the first page.

To choose only one table:

Having said that what you need is to select the table you want. Or by giving it an ID or by using index .eq() .

So, for example to choose the first one could use these selectors:

$('table:first') or $('table:eq(0)') or even $('table').eq(0)

In the case of the second: $('table:eq(1)') or even $('table').eq(1)

To choose only one class:

$('.nomeDaClasse')

The problem with your code is that you are not adding up. You are rewriting the value at each iteration of a new table.

A simple example would be:

$('.janmembros').each(function () {
    totalJanmembros += parseInt(this.value, 10);
});
alert(totalJanmembros);

Note that I use parseInt(valorString, base10) to convert the values in string format to numeric.

An example with your code, adding the classes .janmembros :

var somatorio = 0;
$('table').each(function () {
    var $this = $(this),
        janmembros = parseInt($this.find(".janmembros").val(), 10),
        janvisitantes = parseInt($this.find(".janvisitantes").val(), 10);
    $this.find(".jantotal").html(janmembros + janvisitantes);
    somatorio += janmembros || 0;
});
$(".total").html(somatorio);

link