計算最後一列單元格的值 - 包括動態錶行

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字段基於在每次在同一行渴欲字段上量和重量鍵入的值p（）被觸發。

現在我相信如果我正在處理的表格只是靜態的，這將是一個可管理的任務。但是，包含表格行的動態添加給我帶來了麻煩。

---

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 重量= 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()來的米父錶行匹配odified元素。從那裏，它更容易找到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（）綁定事件或在動態生成的代碼內部的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); 
     } 

     }