Question

我有一个表单，可以在按钮单击时动态添加表行。到目前为止一切正常，但现在我需要计算两个名为unit和rate的字段并且计算应该类似于unit*rate = amount，并且金额的值应该显示在我的总金额字段中。我知道简单的计算，但我不知道如何使用动态添加的行。任何人都可以帮助我吗？

这是我添加新行的脚本：

                    <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type='text/javascript'>
        //<![CDATA[
  $(document).ready(function() {
          var currentItem = $('#items').val();
                $('#addnew').click(function() {
                    currentItem++;
                    $('#items').val(currentItem);
                    //var strToAdd = ;
                     $('#data').append('<tr><td align="center"><input type="text" size="6" maxlength="6" id="ord" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="6" id="srno" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\
                                        <td align="center"><textarea name="descrip_' + currentItem + '" id="descrip" cols="70" class="form-input-textarea"></textarea></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="unit" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="prevqty" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="thisqty" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="qty" maxlength="6" name="unit_' + currentItem + '" class="qty form-input-rate"  onkeyup="calculateRow();"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="rate" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate"  onkeyup="calculateRow();"/></td>\n\
                                        <td align="center"><input type="text" size="6" maxlength="9" id="amt" maxlength="6" name="amt_' + currentItem + '" class="cal form-input-rate"  onkeyup="calculateRow();"/></td>\n\
                                        </tr>');

                });
            });
   //]]>
     </script>

这是我的计算代码，但是当我添加新行

时它似乎不起作用

function calculateSum() {

    var sum = 0;
    $(".cal").each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += parseFloat(this.value);
        }
    });
    $("#total").val(sum.toFixed(2));
}

function calculateRow() {

    $('.qty, .rate').keyup(function () {
        var cost = 0;
        var $row = $(this).closest("tr");
        var qty = parseFloat($row.find('.qty').val());
        var rate = parseFloat($(".rate").val())
        cost = qty * rate;
           //  alert($("#rate").val());

        if (isNaN(cost)) {
            $row.find('.cal').val("0");
        } else {
            $row.find('.cal').val(cost);
        }
        calculateSum();
    })
}
        </script>

Answer 1

您的代码存在一些问题。首先，输入元素上的ID属性将在每一行的页面上重复。这是无效的HTML。页面上的每个ID都应该是唯一的。

其次，您在单位，费率和调用onkeyup的总输入上添加calculateRow事件，然后将另一个keyup事件重新绑定到输入。所以每次按一个键，你都会一次又一次地绑定函数。试试这个：

function calculateRow() {
    var cost = 0;
    var $row = $(this).closest("tr");
    var qty = parseFloat($row.find('.qty').val());

    // changed the following line to only look within the current row
    var rate = parseFloat($row.find('.rate').val());

    cost = qty * rate;

    if (isNaN(cost)) {
        $row.find('.cal').val("0");
    } else {
        $row.find('.cal').val(cost);
    }
    calculateSum();
}

的更新： 的

我还会移除内联onkeydown事件绑定并将其向上移动：

$('#data').on('keyup', '.qty, .rate, .cal', calculateRow);

这会将事件绑定到#data元素，并且仅在.qty, .rate, .cal内匹配#data的元素触发事件时才调用事件侦听器。因此，只要您不删除#data元素，这也适用于动态添加的元素。

如何使用jQuery和PHP创建计算以及动态添加的行

1 个答案: