Как получить общую сумму в нескольких таблицах

#javascript #jquery

Вопрос:

У меня есть несколько таблиц, и я хочу получить общую сумму для каждой таблицы. Пожалуйста, посмотрите демонстрацию в fiddle.

 var total = 0;
$("table").each(function(i){
    total  =  $('.a', this).text() || 0;
    console.log( 'total: ' total );
    $("#subtotal", this).text( total );
    //console.log( '-' $('.a', this).text() );
});

https://jsfiddle.net/juandela/6r1g30dx/2/

1. $("table tr") не $('table')

2. Спасибо за ответ. первая таблица верна, но во второй таблице она также суммирует общую сумму в первой таблице

3. @Mohamed-Yousef Я изменил идентификатор на класс. Все еще получаем тот же результат.

4. Пожалуйста, добавьте свой HTML.

Ответ №1:

Вам нужно переместиться var total=0 внутрь цикла таблицы, чтобы он сбрасывался для каждой таблицы

Затем вам нужно выполнить цикл по каждой ячейке, чтобы получить текст отдельной ячейки.

Проблема с получением всего $('.a', this).text() заключается в том, что он объединяет все элементы текста в одну строку, поэтому вы видите такие числа, как "1357" как общее в первой таблице

Наконец, вы не можете повторять идентификаторы на странице, поэтому измените промежуточный итог на класс

 $("table").each(function(i) {
  var total = 0;
  $('.a', this).each(function() {
    total  =  $(this).text() || 0;
  });
  $(".subtotal", this).text(total);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="a">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td class="a">3</td>
    <td>4</td>
  </tr>
  <tr>
    <td class="a">5</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="a">7</td>
    <td>8</td>
  </tr>
  <tr>
    <td class="subtotal"></td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td class="a">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td class="a">3</td>
    <td>4</td>
  </tr>
  <tr>
    <td class="a">5</td>
    <td>6</td>
  </tr>
  <tr>
    <td class="a">7</td>
    <td>8</td>
  </tr>
  <tr>
    <td class="a">9</td>
    <td>10</td>
  </tr>
  <tr>
    <td class="a">11</td>
    <td>12</td>
  </tr>
  <tr>
    <td class="subtotal"></td>
  </tr>
</table>

1. хм.. Я совершенно забыл о сбросе общей суммы 🙂

2. @charlietfl ВАУ! Это решает мой вопрос. Большое вам спасибо.

3. и @Mohamed-Yousef Спасибо

4. @charlietfl Извините, я не могу принять ваш ответ, потому что у меня менее 15 репутаций.

5. @Juan … не беспокойтесь о недостатках. В будущем, однако, поможет включить достаточное количество рассматриваемого html, чтобы он был автономным