如何在動態添加行中克隆方法？

Question

我創建了一個將觸發一次在文本框中（的onChange）用戶的任何類型的方法，但是當其他方法被調用這個代碼僅實現。

問題是，它只能在一排工作，它不會對下面添加行工作了。通過jquery的

添加行

$('#data').append('<tr><td> <input type="checkbox" name="chk" /> </td><td><input type="hidden" name = "itemCode"/><input type="text" id= "itemName[]" value="' + data[0].itemName + '"/> </td><td><input type="text" id="unitPrice[]" name = "unitPrice" value="' + data[0].unitPrice + '"/></td><td><input type="number" id="volumeQty[]" onChange="SolveTQP();" name="volumeQty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"/><td><input type="text" name = "Total Quantity Price" id="TQP[]" /></td><td><input type="hidden" name = "receivingStatus" value="pending" /><input type="hidden" name = "reconcileStatus" value="pending" /><input type="text" name = "note"/></td>' + '</tr>'); 

方法，其所有的觸發的onChange

function SolveTQP() { 
     $("#data").each(function() { 
       var $this = $(this); 
       var unitPrice = parseInt($this.find('[id="unitPrice\\[\\]"]').val()); 
       var volumeQty = parseInt($this.find('[id="volumeQty\\[\\]"]').val()); 
       var STotal = unitPrice * volumeQty; 
       $this.find('[id="TQP\\[\\]"]').val(STotal); 
      }); 
      return false; 
    SolveTotal(STotal); 
} 

Answer 1

你給你的動態添加元素重複id屬性是無效的HTML。並參照其id屬性獲取元素的.val()將只返回與id的第一個元素的值。

而是使用類名和相對選擇。追加HTML作爲

<tr> 
    <td><input type="checkbox" name="chk" /></td> 
    <td> 
     <input type="hidden" name = "itemCode"/> 
     <input type="text" class="itemName" value="' + data[0].itemName + '"/> 
    </td> 
    <td><input type="text" class="unitPrice" name="unitPrice" value="' + data[0].unitPrice + '"/></td> 

    you appear to be missing a closing </td> in the next line 
    <td><input type="number" class="volumeQty" name="volumeQty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"/> 
    <td><input type="text" name="Total Quantity Price" class="TQP" /></td> 
    <td> 
     <input type="hidden" name="receivingStatus" value="pending" /> 
     <input type="hidden" name="reconcileStatus" value="pending" /> 
     <input type="text" name="note"/> 
    </td> 
</tr> 

，並使用Unobtrusive Javascript而不是行爲污染您的標記

$('#data').on('change', '.volumeQty', function() { 
    var row = $(this).closest('tr'); 
    var volumeQty = Number($(this).val()); 
    var unitPrice = Number(row.find('.unitPrice').val()); 
    row.find('.TQP').val(volumeQty * unitPrice); 
}); 

注似乎沒有必要總每隔一行的（數量並沒有改變，因此它只是毫無意義額外的開銷。但是，如果你的總計每行希望在將材料與id="data"，然後添加下面的腳本

$('#data').on('change', '.volumeQty', function() { 
    .... 
    var total = 0; 
    $.each($('#data tr'), function(index, item) { 
     total += Number($(this).find('.TQP').val()); 
    }); 
    // set the total to some element? 
}); 

參考fiddle

Answer 2

• 首先，將文件不應含有與id多於一個的元件。換句話說，id應該是唯一的。您應該使用name，class等
• 你的HTML字符串中包含打開的標籤，但不關閉標籤
• 通用的標準是大寫首字母只爲構造功能。更好地利用solveTQP，solveTotal等，以避免混淆
• 你應該參考傳遞到元素像 <input type="number" name="volumeQty"class="volumeQty" onChange="solveTQP(this);"/> 事件處理程序最好你應該使用event delegation，而不是內聯事件處理程序

一旦你解決所有這些，你的代碼應該像下面假設你使用class代替id，你是基於當前行計算total：

function solveTQP(elm) { 
    var $this = $(elm); 
    var $currentRow = $this.closest('tr'); 
    var unitPrice = parseInt($currentRow.find('.unitPrice').val(),10); 
    var volumeQty = parseInt($this.val(),10); 
    var sTotal = unitPrice * volumeQty; 
    $currentRow.find('.totalQuantityPrice').val(sTotal); 
    solveTotal(sTotal); 
} 

Answer 3

當你重複的行，然後嘗試id獲取的元素，它不工作，因爲你有相同的id多個元素。這裏的一個替代方案不改變很多現有的代碼是使用該行的一類和使用該類通過你的元素像這樣的迭代：

function SolveTQP() { 
     $(".trclass").each(function() { 
       var $this = $(this); 
       var unitPrice = parseInt($this.find('[id="unitPrice\\[\\]"]').val()); 
       var volumeQty = parseInt($this.find('[id="volumeQty\\[\\]"]').val()); 
       var STotal = unitPrice * volumeQty; 
       $this.find('[id="TQP\\[\\]"]').val(STotal); 
      }); 
      return false; 
    SolveTotal(STotal); 
} 

var data = [ 
    {itemName:"iphone", unitPrice:600}, 
    {itemName:"android", unitPrice:300} 
    ]; 

$("#btn").on('click', function(){ 
     $('#data').append('<tr class="trclass"><td> <input type="checkbox" name="chk" /> </td><td><input type="hidden" name = "itemCode"/><input type="text" id= "itemName[]" value="' + data[0].itemName + '"/> </td><td><input type="text" id="unitPrice[]" name = "unitPrice" value="' + data[0].unitPrice + '"/></td><td><input type="number" id="volumeQty[]" onChange="SolveTQP();" name="volumeQty" onkeypress="return event.charCode >= 48 && event.charCode <= 57"/><td><input type="text" name = "Total Quantity Price" id="TQP[]" /></td><td><input type="hidden" name = "receivingStatus" value="pending" /><input type="hidden" name = "reconcileStatus" value="pending" /><input type="text" name = "note"/></td>' + '</tr>'); 
}); 

<table id="data"> 
</table> 
<button id="btn">Add Row</button> 

這裏，.trclass添加到您的行用於遍歷動態插入的行。這是一個工作fiddle。