Форум

Tasha12 · #1 (**permalink**) 16.04.2017, 18:25

Здравствуйте!

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

<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

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>

Форум

Справочник

Discord чат

Курсы javascript