Question

你有一个动态在按钮点击上添加一个表行的表单，但现在我想在我的表的列中执行计算，比如我有一个列名称prevqty，thisqty，qty（总数量），比率和金额以及我有一个总字段，其中存储了总量我已经尝试过计算，但它似乎无法正常工作

这是我的脚本

   $(document).ready(function() {
var currentItem = $('#items').val();

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

$('#addnew').click(function() {
    currentItem++;
    $('#items').val(currentItem);
    $('#data').append('<tr>\n\
        <td align="center"><input type="text" size="6" maxlength="6" 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" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\
        <td align="center"><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty form-input-rate" onkeyup="calculateRow();"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate" onkeyup="calculateRow();"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal  form-input-amt" onkeyup="calculateRow();"/></td>\n\
        </tr>'
                     );
});

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() {
    var cost = 0;
    var $row = $(this).closest("tr");
    var prevqty = parseFloat($row.find('.prevqty').val());
    var thisqty = parseFloat($row.find('.thisqty').val());
    var qty = parseFloat($row.find('.qty').val(prevqty + thisqty));
        //parseFloat($row.find('.qty').val());
    alert(qty);
    if (isNaN(qty)) {
        $row.find('.qty').val("0");
    } else {
        $row.find('.qty').val(qty);
    }
    // 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();
}});

我有一个工作小提琴这里prevqty和thisqty工作正常，但费率和金额计算不起作用见http://jsfiddle.net/rey_kahn/YS4N2/

Answer 1

每次$("#addnew").click事件触发时，您都需要重新绑定keyup/calculateRow方法。类似的东西：

$('#addnew').click(function() {
    currentItem++;
    $('#items').val(currentItem);
    $('#data').append('<tr>\n\
        <td align="center"><input type="text" size="6" maxlength="6" 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" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\
        <td align="center"><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty form-input-rate" onkeyup="calculateRow();"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate" onkeyup="calculateRow();"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal  form-input-amt" onkeyup="calculateRow();"/></td>\n\
        </tr>'
                     );
    $('#data').off('keyup').on('keyup', '.prevqty, .thisqty, .qty, .rate, .cal', calculateRow);
});

请注意事件结束时$("#data").off('keyup').on(...？这应该可以正确计算新行。

<强>更新

在审核了您在jsfiddle评论中发布的代码后，我发现了一些HTML错误，但我认为真正的问题是您设置/计算qty的方式。查看此更新小提琴：http://jsfiddle.net/YS4N2/1/

在那里你会看到我将qty输入与用于计算目的的方式分开。这没问题。

Answer 2

在开头添加默认行和Grand Total。

还有一些细微的变化。

full.exe
config file will have "full=1".
lite.exe
config file will not contain this info.

查看更新后的链接：http://jsfiddle.net/YS4N2/9/

如何在jquery中对动态添加的表行执行计算

2 个答案: