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获取元素时，它不起作用，因为您有多个具有相同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。

Answer 2

您为动态添加的元素提供了重复的id属性，这些属性是无效的html。通过引用其.val()属性获取元素的id，只会返回第一个元素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 3

首先，文档不应包含多个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);
}

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

3 个答案: