javascript - 计算每行Jquery中的输入数组

Question

我是 JQuery 的新手，我的代码只适用于第一行，不计算其他行。我有两个按钮，一个用于添加另一行，一个用于删除它。我尝试做的是计算价格+增值税*数量并将其放在每一行的总计字段中。这里是我的 html 的代码

<table border='1' id="mytable" dir="rtl" style='border-collapse: collapse;'>
    <thead>
        <tr>
            <th> partnumber </th>
            <th>name</th>
            <th>price </th>
            <th>vat</th>
            <th>quantity</th>
            <th> price + vat</th>
            <th> total quantity*(price+vat) </th>
            <th> </th>

        </tr>
    </thead>
    <tbody>
        <tr class='tr_input'>
            <td><input type='text' name="partnumber[]" class='username' id='partnumber_1' placeholder='پارت نه‌مبه‌ر '></td>
            <td><input type='text' class='name' name="name[]" id='name_1' ></td>
            <td><input type='text' class='price' name="price[]" id='price_1' ></td>
            <td><input type='text' class='vat' name="vat[]" id='vat_1' ></td>
            <td><input type='text' class='quantity' name="quantity[]" id='quantity_1' ></td>
            <td><input type='text' class='amount' name="amount[]" id='amount_1' ></td>
            <td><input type='text' class='total'  name="total[]" id='total_1' ></td>
        </tr>
    </tbody>
</table>
<br>
<input type='button' value='Add fields' id='addmore' class="btn btn-success">
<input type='button' value='remove' id='remove' class="btn btn-danger">

这是界面的屏幕截图。

这是添加新行的JS代码

$('#addmore').click(function(){
    var lastname_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
    var split_id = lastname_id.split('_');
    var index = Number(split_id[1]) + 1;
    var html = "<tr class='tr_input'><td><input type='text' name='partnumber[]' class='username' id='username_"+index+"' placeholder='بگه‌ری بۆ پارت نه‌مبه‌ر '></td><td><input type='text' class='name' name='name[]' id='name_"+index+"'></td><td><input type='text' class='price' name='price[]'  id='price_"+index+"' ></td><td><input type='text' class='vat' name='vat[]' id='vat"+index+"'></td><td><input type='text' class='quantity' name='quantity[]' id='quantity_"+index+"' ></td><td><input type='text' class='amount' name='amount[]' id='amount_"+index+"' ></td><td><input type='text' class='total' name='total[]' id='total_"+index+"' ></td><td align='center'><input type='checkbox' name='record'></td></tr>";

    // Append data
    $('tbody').append(html);
});

最后是计算总数的代码，仅适用于第一行。

$('.total').each(function() {
    $(this).on('click',function (ev) {
        // var  total=0;
        var quantity=$(this).attr('id');
        var splitid = quantity.split('_');
        var index = splitid[1];
        var price= parseFloat($('#price_'+index).val());
        var vat=parseFloat($('#vat_'+index).val());
        var quan=parseFloat($('#quantity_'+index).val());
        var amount=$('#amount_'+index).val();
        amount=price+vat;
        $('#amount_'+index).val(amount);
        alert(amount);
        //alert(price);
        var total=amount*quan;
        //var qunatity_num=parseInt(quantity.val());
        $('#total_'+index).val(total);

        //alert(total);
        // $('#total_'+index).val(total);
    });
});

拜托，你能告诉我我的代码有什么问题吗，我已经花了一个星期试图解决这个问题。谢谢。

Answer 1

一些问题:

• 您为新行添加的 HTML 中缺少下划线:vat 应为 vat_

• 不要使用 $('.total').each(function() {:没有必要循环。点击处理程序将作用于所有匹配的元素，如果你考虑下一点:

• 使用事件委托(delegate)来确保您的点击处理程序也被调用用于具有 total 类的 future 单元格:

  $(document).on('click', '.total', function (ev) {
  

这样就可以了。

然而，最好不要全部使用动态 id 属性，而只使用 CSS 类。使用 jQuery 方法，您可以轻松找出被单击的“当前”行 (.closest("tr"))，然后到 .find()公式中需要的元素。