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

Asked

Viewed 2,947 times

3

Hi, I was given a correct answer in a very similar question, but it lacked this detail that I can not solve...how to add the elements of the same class of 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 still could not solve the problem, follow Jsfiddle with new information of the problem: Jsfiddle
There are two Ivs with the tables inside and I need the sum of each of the Ivs...I need to jump to the next sum of the next div !

jquery

2 answers

4


First, and as @Zuul said, you need to get rid of those duplicate Ids in case those tables are on the front page.

To choose only one table:

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

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

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

In the case of the second: $('table:eq(1)') or $('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 every iteration of a new table.

A simple example would be:

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

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

An example with your code, adding up 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);

http://jsfiddle.net/6g6Wd/6/

  • and to add up the value of all of the same class ?

  • @Alanps, but you want to add one to one, right?

  • No, I want the total value of all items in the same class...!

  • @Alanps, exactly, one by one, class by class. It’s the example I put. I’m going to add this idea to your code and put it here

  • @Alanps: http://jsfiddle.net/6g6Wd/6/

  • that’s right, there’s only one detail, I need to add the "jantotal" field and if I change the class in your jsfiddle example it doesn’t work...

  • @Alanps either uses my simple example in the answer, after the code you already have, or you can use it like this: http://jsfiddle.net/6g6Wd/7/

  • ah, Valew @Sergio, I got it, I just changed line 7 of the example to: somatorio += parseint($this.find('.jantotal').html()) || 0; http://jsfiddle.net/6g6Wd/9/

  • @Alanps, this version you put up works but it’s not good. Take a look at my last comment above. You already have that amount, you don’t need to go do another .find() which only delays everything. And always use parseint with the second parameter, unless you want to convert numbers with octal basis.

  • and in that case ? http://jsfiddle.net/6g6Wd/10/

  • @Alanps, this is much better!

  • but how to catch the result of the second div dai ?

  • @Alanps better explain what 2a div means

  • in this case http://jsfiddle.net/6g6Wd/13/, there are two Ivs with the tables inside and need the sum of each of the Ivs...I need to jump to the next sum of the next div

Show 9 more comments

2

I got it this way:

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);
});
  • 1

    Alanps, that’s right! It was very late yesterday here in Europe so I only saw your question now. I’m glad I helped. By the way, and just to broaden your knowledge, this selector $('table', this) is the memo that $(this).find('table');, and both do what you need here.

Browser other questions tagged jquery

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