Javascript-форум - Как посчитать сумму в таблицы из полей Input

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как посчитать сумму в таблицы из полей Input (https://javascript.ru/forum/jquery/76965-kak-poschitat-summu-v-tablicy-iz-polejj-input.html)

Как посчитать сумму в таблицы из полей Input

Здравствуйте, помогите не могу понять как мне посчитать суму input в которых класс timer_input и получить суму в конце таблицы. Пробовал много вариантов ну не один не подходит :(

<table class="table_index">
  <tr class="number_">
    <td>
       <input class="form-control js-time_744 timer_input" step="0.01" type="number" value="6.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="744">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <tr class="number_">
    <td>
       <input class="form-control js-time_745 timer_input" step="0.01" type="number" value="4.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="745">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <td id="sum_total">Общая сумма</td>
</table>

document.getElementById('sum_total').textContent = [].reduce.call(
    document.querySelectorAll('input.timer_input'),
    (res, node) => res + +(node.value || 0),
    0
);

Nexus,
Спасибо большое.

Nexus,
Можете ещё подсказать, у меня есть

<ul class="nav nav-tabs">
  <li>
    <a data-toggle="tab" href="#Monday">04 Mar Monday 0.0</a>
  </li>
  <li>
    <a data-toggle="tab" href="#Tuesday">05 Mar Tuesday 0.0</a>
  </li>
  <li class="active">
    <a data-toggle="tab" href="#Wednesday">06 Mar Wednesday 0.0</a>
  </li>
  <li>
    <a data-toggle="tab" href="#Thursday">07 Mar Thursday 0.0</a>
  </li>
  <li>
    <a data-toggle="tab" href="#Friday">08 Mar Friday 0.0</a>
  </li>
  <li>
   <a data-toggle="tab" href="#Saturday">09 Mar Saturday 0.0</a></li>
  <li>
   <a data-toggle="tab" href="#Sunday">10 Mar Sunday 0.0</a>
  </li>
</ul>

Когда я нажимаю на любой день у меня открывается таблица, и в таблице есть
например я сейчас на таблице

<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade" id="Monday">

<table class="table_index">
  <tr class="number_">
    <td>
       <input class="form-control js-time_744 timer_input" step="0.01" type="number" value="6.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="744">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <tr class="number_">
    <td>
       <input class="form-control js-time_745 timer_input" step="0.01" type="number" value="4.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="745">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <tr>
    <td id="sum_total">Общая сумма</td>
  </tr>
</table>

как можно получить суму каждой таблице, сейчас я получаю суму всех таблиц :( мне нужно что сума отображалась для каждой таблице.

id - уникальный идентификатор.

Цитата:

Сообщение от Gidpoiiohika

Когда я нажимаю на любой день у меня открывается таблица, и в таблице есть
например я сейчас на таблице

Вы по-русски плохо разговариваете?

id="sum_total" замените на class="sum_total"
и попробуйте так:

$('.tab-content .table_index').each(function() {
    $(this).find('.sum_total').text([].reduce.call(
        this.querySelectorAll('input.timer_input'),
        (res, node) => res + +(node.value || 0),
        0
    ));
});

Nexus,
Спасибо большое!!! ну сейчас всё хорошо работает, ну только когда перезагружу страницу, можно как то сделать что бы оно работало без перезагрузки ? :)

$('body').on('change', '.timer_input', function() {
    $('.tab-content .table_index').each(function() {
      $(this).find('.sum_total').text([].reduce.call(
          this.querySelectorAll('input.timer_input'),
          (res, node) => res + +(node.value || 0),
          0
      ));
    });
  })

Так правильно будет?

$('body').on('change', '.timer_input', function() {
    $('.tab-content .table_index').each(function() {
      $(this).find('.sum_total').text([].reduce.call(
          this.querySelectorAll('input.timer_input'),
          (res, node) => res + +(node.value || 0),
          0
      ));
    });
  })

Цитата:

Сообщение от Gidpoiiohika

Так правильно будет?

попробуйте и узнаете

Nexus,
Спасибо большое за помощь!

Nexus,
можно как то показать sum_total не в таблице а на вкладке

$('body').bind('onload, change', '.timer_input', function() {
      $('.tab-content .table_index').each(function() {
        $(this).find('.sum_total').text([].reduce.call(
            this.querySelectorAll('input.timer_input'),
            (res, node) => res + +(node.value || 0),
            0
        ));
      });
    }).change();

<ul class="nav nav-tabs">
  <li><a class="sum_total" data-toggle="tab" href="#Monday">04 Mar Monday 2.0</a></li>
  <li><a class="sum_total" data-toggle="tab" href="#Tuesday">05 Mar Tuesday </a></li>
  <li class="active"><a class="sum_total" data-toggle="tab" href="#Wednesday">06 Mar Wednesday 3.0</a></li>
  <li><a class="sum_total" data-toggle="tab" href="#Thursday">07 Mar Thursday </a></li>
  <li><a class="sum_total" data-toggle="tab" href="#Friday">08 Mar Friday </a></li>
  <li><a class="sum_total" data-toggle="tab" href="#Saturday">09 Mar Saturday </a></li>
</ul>

сейчас когда например в таблице есть
<td class="sum_total"></td> я получаю то что нужно, ну кода добавляю этот класс в тег <a></a> тогда не работает :( Можно что то придумать? Буду очень благодарен.

$('body').on('change', '.timer_input', function() {
    $('.tab-content .table_index').each(function() {
        const sum = [].reduce.call(
            this.querySelectorAll('input.timer_input'),
            (res, node) => res + +(node.value || 0),
            0
        );

        const id = $(this).find('.sum_total').text(sum).closest('.tab-pane').attr('id');

        $('a[href="#' + id + '"].sum_total').text(sum);
    });
}).change();