如何在动态添加行中克隆方法？

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。