计算最后一列单元格的值——涉及动态表行

Question

考虑以下 HTML 表格：

<table id="myTable1">
    <tr id="TR1">
        <td><input type="text" id="quantity1" name="quantity1" /></td>
        <td><input type="text" id="weight1" name="weight1" /></td>
        <td><input type="text" id="sub_total1" name="sub_total1" /></td>
    </tr>
</table>

我在这里想要完成的是，我需要根据在 中键入的值更新 每一行 上的 sub_total 字段的值每次触发 keyup() 时，数量 和 weight 字段在同一行。

现在，如果我正在处理的表只是静态的，我相信这将是一项非常易于管理的任务。但是包含动态添加表行给我带来了麻烦。

---

用于动态添加行的 JQuery：

$(document).ready(function() {

var counter = 2;

$("#addButton").click(function() {

    $('#myTable1 tr:last').after(
        '<tr id="TR"><td><input type="text" name="quantity' + counter + 
            '" id="quantity' + counter + '" value=""></input></td>' +

        '<td><input type="text" name="weight' + counter + 
            '" id="weight' + counter + '" value=""></input></td>' +

        '<td><input type="text" name="sub_total' + counter + 
            '" id="sub_total' + counter + '" value=""></input></td></tr>'
    );

    counter++;
});
});

---

这里有用于计算 sub_total 的公式：

var sub_total  = ((170 * first 10 kilos) + (70 * the remaining weight)) * (quantity);

所以给定样本值： 数量 = 10 weight = 15，我们应该有

var sub_total  = ((170 * 10) + (70 * 5)) * (10);

---

我有以下作为开始，但不太确定在这些函数中放置什么

$('#myTable1 input[id^=\'quantity\'], #myTable1 input[id^=\'weight\']').live('keyup',function() {

    $('#myTable1 input[id^=\'quantity\'], #myTable1 input[id^=\'weight\']').each(function(index, value) {
    });
});

Answer 1

您可以使用closest() 来匹配被修改元素的父表行。从那里，更容易找到quantity、weight 和sub_total 元素：

$("#myTable1 [id^=quantity], #myTable1 [id^=weight]").live("keyup", function() {
    var $tr = $(this).closest("tr");
    var quantity = parseInt($("[id^=quantity]", $tr).val());
    var weight = parseInt($("[id^=weight]", $tr).val());

    var firstTen;
    if (weight <= 10) {
        firstTen = weight;
        weight = 0;
    } else {
        firstTen = 10;
        weight -= 10;
    }

    $("[id^=sub_total]", $tr).val((170 * firstTen + 70 * weight) * quantity);
});

Answer 2

var input_cols = $(
    '<tr id="TR"><td><input type="text" name="quantity' + counter + 
        '" id="quantity' + counter + '" value=""></input></td>' +

    '<td><input type="text" name="weight' + counter + 
        '" id="weight' + counter + '" value=""></input></td>' +

    '<td><input type="text" name="sub_total' + counter + 
        '" id="sub_total' + counter + '" value=""></input></td></tr>'
).find('input[name=quantity], input[name=weight]').keyup(function() { updateTotal(this); });

$('#myTable1 tr:last').after(input_cols);

function updateTotal(el) {
  el = el.closest('tr');
  weight = el.find('input[name=weight]').val();
  quantity = el.find('input[name=quantity]').val();
  el.find('input[name=sub_total]').val( quantiy * weight .... put your formula here);
}

Answer 3

如果您的问题是：动态字段没有发生任何事情，很明显 keyup 事件未绑定。

使用 .bind() 绑定事件或在动态生成的代码中调用 to do on keyup。

Answer 4

为不同的输入字段赋予不同的类名，例如quantityweightsub_total 试试这个

    $("#addButton").click(function() {

          $('#myTable1 tr:last').after(
          '<tr id="TR' + counter +'"><td><input type="text" class="quantity" name="quantity' + counter +
            '" id="quantity' + counter + '" value=""></input></td>' +

            '<td><input type="text" class="weight" name="weight' + counter +
            '" id="weight' + counter + '" value=""></input></td>' +

            '<td><input type="text" class="sub_total" name="sub_total' + counter +
            '" id="sub_total' + counter + '" value=""></input></td></tr>'
        );

          counter++;
          $('tr').each(function(){
            var qnty = 0
            var weight = 0;
            $('input.quantity', $(this)).keyup(function(){
              qnty = Number($(this).val());
              if(qnty != 0 && weight != 0){
                newRowCalculation($(this).parent().parent('tr'), qnty, weight);
              }

            });
            $('input.weight', $(this)).keyup(function(){
              weight = Number($(this).val());
              if(qnty != 0 && weight != 0){
                newRowCalculation($(this).parent().parent('tr'), qnty, weight);
              }
            });                        
          });

function newRowCalculation(elem, qnty, weight){
        if(weight > 10){
          var extraWeight = Number(weight - 10);
          var subTotal = (170 * 10 + 70 * extraWeight) * qnty;
          $('.sub_total', $(elem)).val(subTotal);
        }
        else{
          var subTotal = (170 * weight) * qnty;
          $('.sub_total', $(elem)).val(subTotal);
        }

      }