javascript多线程表和数组

Question

我想为用户表的全部数据编写代码，并且用户有多个具有不同ID和相同类的表。我想在键盘输入或用户输入时进行总计输入。如果有人知道除此以外的其他方法，请帮助我

                <thead>
                <th>Computed Amount</th>
                </thead>
                <tbody>
<td><input type="text" style="text-align:right;" name="task_compute[]"  class="form-control calculate" autocomplete="off" class="form-group"  /></td>
<td><input type="text" style="text-align:right;" name="task_compute1[]"  class="form-control calculate" autocomplete="off" class="form-group"  /></td>
<td><input type="text" style="text-align:right;" name="task_compute2[]"  class="form-control calculate" autocomplete="off" class="form-group"  /></td>
      </tbody>
                <tfoot>
    <td style="padding-top:15px;" align="right"><b>TOTAL SALARY</b>
                </td><td>
                        <input type="text" style="text-align:right;" name="sub_total[]" id="sub_total" value="" class="form-control"  class="form-group sub_total"  ></td></tfoot>
</table>

 <table id="example123" class="table example122 table-bordered">
                <thead>
                <th>Computed Amount</th>
                </thead>
                <tbody>
<td><input type="text" style="text-align:right;" name="task_compute[]"  class="form-control calculate" autocomplete="off" class="form-group"  /></td>
<td><input type="text" style="text-align:right;" name="task_compute1[]"  class="form-control calculate" autocomplete="off" class="form-group"  /></td>
<td><input type="text" style="text-align:right;" name="task_compute2[]"  class="form-control calculate" autocomplete="off" class="form-group"  /></td>
      </tbody>
                <tfoot>
    <td style="padding-top:15px;" align="right"><b>TOTAL SALARY</b>
                </td><td>
                        <input type="text" style="text-align:right;" name="sub_total[]" id="sub_total" value="" class="form-control"  class="form-group sub_total"  ></td></tfoot>
</table>```





//Js& Jquery

 ```$('.example122 > tbody > .calculate > input[type=text]:nth-child(1) ').on('input', '.calculate', function () {
        var id=$(this).parents('table').attr('id');
        calculateTotal(id);


});


    function calculateTotal(id) 
    {
        var grandTotal = 0;

                             $('#'+id+' > tbody > tr').each(function() {
            var c_sbt = $('.calculate', this).val();
                          grandTotal += parseFloat(c_sbt);
                          });

        var subT = parseFloat(grandTotal);


        $('.sub_total').val(subT.toFixed(2));
    }```




I am trying to run the above js and jquery but it is not working

Answer 1

您在这里没有正确使用Event Delegation。事件委托使我们可以将单个事件侦听器附加到父元素，该元素将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。

只需替换为：

$('.example122 > tbody > .calculate > input[type=text]:nth-child(1) ').on('input', '.calculate', function() {
  var id = $(this).parents('table').attr('id');
  calculateTotal(id);
});

带有此：

$('.example122').on('input', '.calculate', function() {
  var id = $(this).closest('table').attr('id');
  calculateTotal(id);
});