javascript - JavaScript求和函数不起作用

Question

我在对文本框进行求和时遇到问题，但如果我按“添加更多”按钮，文本框就会出现。所以我将它与单击函数混合，结果是 求和函数只能对第一个文本框求和。

这是我的 JavaScript :

var i = $('table tr').length;
var count = $('table tr').length;
var row = i;
var a = 0;

for (a = 0; a <= i; a++) {
  $(".addmore_" + a).on('click', function (a) {
    return function() {
    var box = $("#box_"+ a);
    box.val( Number(box.val())+1 );

      var data = "<td><input class='form-control sedang' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>";
      $("#keatas_" + a).append(data);

    $("#packinglist_"+ a).each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });


    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $("#packinglist_"+ a).each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#netto_"+ a).val(sum.toFixed(2));



                        };

            }
    }(a));

}

这是我与 php 混合的 html :

for($i=1;$i<=$_POST['jumlahdata'];$i++)
            {
                    $nomor = $a[0];
                    $iden = $nomor + $i;
                        echo"   <tr>
                                <td><span id='snum'>$i.</span></td>
                                <input class='form-control' type='hidden' id='hiddenlot_$i' name='hiddenlot[]' />
                                <input class='form-control' type='hidden' id='hiddencustomer_$i' name='hiddencustomer[]' />
                                <input class='form-control' type='hidden' id='hiddenprice_$i' name='hiddenprice[]' />
                                <td><input class='form-control' type='text' id='jenisbenang_$i' name='jenisbenang[]' readonly/></td>
                                <td><input class='form-control' type='text' id='warna_$i' name='warna[]' readonly/></td>                                
                                <td><input class='form-control' type='text' id='lot_$i' name='lot[]' required/></td>
                                <td><input class='form-control sedang' type='text' id='netto_$i' name='netto[]' required/> </td>
                                <td><input class='form-control pendek' type='text' id='box_$i' name='box[]' /> </td>
                                <td><input class='form-control pendek' type='text' id='cones_$i' name='cones[]'/> </td>
                                <td><input class='form-control' type='text' id='keterangan_$i' name='keterangan[]'/>
                                <input class='form-control' type='hidden' id='keterangan_$i' name='identitas[]' value='$iden'/>
                                 </td>
                            </tr>
                             <tr>
                                <td><a><span class='glyphicon glyphicon-plus addmore_$i' id='$i'></span></a><br>
                                <a><span class='glyphicon glyphicon-minus delete_$i'></a> </td>
                            <td colspan='10'>
                                <table id='keatas_$i' class='keatas'>
                                <tr>

                                </tr>   
                                </table>
                            </tr>
                            </td>";

            }   

如有任何回复，我们将不胜感激，谢谢

<强> Fiddle here

Answer 1

问题是在单击回调中应用 keyup 事件监听器。每次点击“.addMore_”+一个元素，您都会附加一个 <td>第 a^ 行中的 ID 为“packinglist_”+a。之后，您将在该元素上附加 keyup 监听器。您正在使用 id 进行选择，它仅返回第一个匹配项，而不是全部。所以它唯一将监听器附加到第一个 <td>在带有 id 的那一行。更正以代码形式给出。
或者，您可以使用类来完成此操作。但您需要小心，不要将事件多次附加到一个元素。这会导致意外行为，有时甚至导致浏览器崩溃。

在calculateSum函数中，您还通过id访问元素，它只返回一个元素。这应该通过为每行的输入框提供唯一的类来解决。

 var i = $('table tr').length;
 var count = $('table tr').length;
 var row = i;
 var a = 0;

for (a = 0; a <= i; a++) {
  $(".addmore_" + a).on('click',function () {
  return function() {
  var box = $("#box_"+ a);
  box.val( Number(box.val())+1 );

  var rowIdentifier="packinglist_" + a;
  var data = $("<td><input class='form-control sedang "+rowIdentifier +"' type='text' id='packinglist_" + a + "' name='packinglist"+ a +"[]'/></td>");

  $("#keatas_" + a).append(data);

data.find('input').on('keyup',function(){
            calculateSum();
        });

function calculateSum() {

    var sum = 0;
    //iterate through each textboxes and add the values
    $(".packinglist_"+ a).each(function() {

        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#netto_"+ a).val(sum.toFixed(2));
                    };
        }
}(a));
}

请告诉我这是否有帮助。尝试简化html结构。很难理解。

https://jsfiddle.net/rishabdev919/mj3gsLxe/
查看工作 fiddle