时间戳

首页 > 解决方案 > 计算每行Jquery中的输入数组

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

问题描述

我是 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);
    });
});

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

标签： javascriptjqueryarrays

解决方案

一些问题：

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

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

  • 使用事件委托来确保您的点击处理程序也被调用以用于具有total该类的未来单元格：

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

这样就可以了。

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

推荐阅读