Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2017, 18:25
Новичок на форуме
Отправить личное сообщение для Tasha12 Посмотреть профиль Найти все сообщения от Tasha12
 
Регистрация: 16.04.2017
Сообщений: 1

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

Есть динамическая таблица вида:


<tr>
<td class="mat_count"><input type="text" id="1_mat_1" name="column_1"/>...</td>
<td class="mat_count"><input type="text" id="1_mat_2" name="column_2"/></td>
<td class="mat_count"><input type="text" id="1_mat_3" name="column_3"/></td>
</tr>
<tr>
<td class="mat_count"><input type="text" id="2_mat_1" name="column_1"/></td>
<td class="mat_count"><input type="text" id="2_mat_2" name="column_2"/></td>
<td class="mat_count"><input type="text" id="2_mat_3" name="column_3"/></td>
 </tr>  
... Строк может быть любое количество...

<tr>
<td><input type="text" id="count_1" name="column_1">Сумма 1 столбца</td>
<td><input type="text" id="count_2" name="column_2">Сумма 2 столбца</td>
<td><input type="text" id="count_3" name="column_3">Сумма 3 столбца</td>
</tr>




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

пробую сделать что-то такое:

$(document).on('change','.mat_count', function(){
       var i = 1;
       var j = 1;
        var sum = 0;
               
        $('#'+i+'_mat_1').each(function() {    // тут не понимаю, что делать
          
        sum += parseInt($('#'+i+'_mat_2').val());  
        i++;
        })
        $('#count_'+j).val(sum);
        
    });


Натолкните, пожалуйста, на правильный вариант. Может быть таблицу как-то по-другому организовать.
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2017, 19:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Tasha12,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(document).on("input", ".mat_count input", function() {
        var count = $('[id^="count"]').val(0),
            len = count.length;
        $(".mat_count input").each(function(i, el) {
            i %= len;
            count[i].value -= -(+el.value || 0)
        })
    })
});
  </script>
</head>

<body>

<table>
   <tr>
<td class="mat_count"><input type="text" id="1_mat_1" name="column_1"/></td>
<td class="mat_count"><input type="text" id="1_mat_2" name="column_2"/></td>
<td class="mat_count"><input type="text" id="1_mat_3" name="column_3"/></td>
</tr>
<tr>
<td class="mat_count"><input type="text" id="2_mat_1" name="column_1"/></td>
<td class="mat_count"><input type="text" id="2_mat_2" name="column_2"/></td>
<td class="mat_count"><input type="text" id="2_mat_3" name="column_3"/></td>
 </tr>
... Строк может быть любое количество...

<tr>
<td><input type="text" id="count_1" name="column_1">Сумма 1 столбца</td>
<td><input type="text" id="count_2" name="column_2">Сумма 2 столбца</td>
<td><input type="text" id="count_3" name="column_3">Сумма 3 столбца</td>
</tr>

</table>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
не удается получить значения с input и посчитать их сумму kolobku_xxx Events/DOM/Window 8 05.07.2016 18:21
Посчитать сумму ширины всех элементов в наборе без использования цикла Alex_D181 jQuery 7 10.06.2015 15:36
Посчитать кол-во div и вывести сумму. djonA Общие вопросы Javascript 11 27.05.2013 08:45
Посчитать произведение двух колонок таблицы Ronicon Events/DOM/Window 4 29.04.2011 13:12
как посчитать сумму выбранных элементов checkbox nikimak92 Общие вопросы Javascript 9 01.06.2010 10:16