3

Oi, me deram uma resposta correta em uma pergunta bem parecida, mas faltou esse detalhe que não consigo resolver...como somar os elementos da mesma classe de um grupo de tabelas...

Exemplo:

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:

Depois da ajuda do @Sergio eu ainda fiquei sem conseguir resolver o problema, segue o JSFiddle com novas informações do problema: JSFiddle
São duas divs com as tabelas dentro e preciso da soma de cada uma das divs...eu preciso pular pra próxima soma da próxima div !

2 Respostas 2

4

Primeiro, e como o @Zuul referiu tens de livrar-te dessas IDs duplicadas no caso de essas tabelas virem a estar na primeira página.

Para escolher só uma tabela:

Tendo dito isso o que precisas é de selecionar a tabela que queres. Ou dando-lhe uma ID ou usando indice .eq().

Asim, por exemplo para escolher a primeira podia usar-se estes seletores:

$('table:first') ou $('table:eq(0)') ou ainda $('table').eq(0)

No caso da segunda: $('table:eq(1)') ou ainda $('table').eq(1)

Para escolher só uma classe:

$('.nomeDaClasse')

O problema no teu código é que não estás a somar. Estás a reescrever o valor a cada iteração de uma nova tabela.

Um exemplo simples seria:

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

Nota que uso o parseInt(valorString, base10) para converter os valores em formato string para numéricos.

Um exemplo com o teu código, somando as 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/

14
  • e para somar o valor de todos da mesma classe ?
    – Alan PS
    Commented 3/07/2014 às 22:14
  • @AlanPS, mas você quer somar uma a uma, certo?
    – Sergio
    Commented 3/07/2014 às 22:17
  • não, quero o valor total de todos itens da mesma classe...a soma de todos!
    – Alan PS
    Commented 3/07/2014 às 22:18
  • @AlanPS, exato, uma a uma, classe a classe. É o exemplo que coloquei. Vou juntar essa ideia ao seu código e colocar aqui
    – Sergio
    Commented 3/07/2014 às 22:22
  • @AlanPS: jsfiddle.net/6g6Wd/6
    – Sergio
    Commented 3/07/2014 às 22:24
2

Consegui da seguinte forma:

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
  • 1
    AlanPS, exato! Ontem já era bem tarde aqui na Europa por isso só vi a sua pergunta agora. Fico contente de ter ajudado. Já agora, e só para alargar o seu conhecimento, este selector $('table', this) é o memo que $(this).find('table');, e ambos fazem o que você precisava aqui.
    – Sergio
    Commented 4/07/2014 às 5:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .