-1

我有一个表单，可以在单击按钮时动态添加表格行。到目前为止一切正常，但现在我需要计算两个名为unitandrate 的字段，计算应该类似于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>
4

1 回答 1

0

您的代码有一些问题。首先，输入元素上的 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

于 2013-04-11T15:23:06.437 回答