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() {：没有必要循环。如果您考虑到以下几点，则点击处理程序将对所有匹配的元素起作用：
使用事件委派确保您的点击处理程序也被具有total类的以后单元调用：
```
$(document).on('click', '.total', function (ev) {
```

它起作用了。

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

计算每行Jquery中的输入数组

1 个答案: