从动态添加的表行中获取数据

Question

我有一个 Django 发票项目，它有一个包含产品、制造商等的后端。

现在有一个带有列标题的账单表：产品 ID、产品名称、产品价格、产品数量、税金、总计等

使用添加行按钮，用户可以为下一个产品添加行（即动态添加的行）。

我现在想要的是将 jQuery 事件侦听器与每个产品 ID 列绑定（即，如果我有 5 个产品的 5 行，每行应该有一个产品 ID 列），例如用户输入（和编辑）产品 ID，我可以 - 在 AJAX 的帮助下填充剩余的列。

我的疑问是如何做到这一点。

另外，当我取回 AJAX 数据时，如何识别要添加数据（产品名称、产品价格等）的行？

编辑 1

我正在使用以下代码生成动态行：

function generateTableRow() {
var emptyColumn = document.createElement('tr');

emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' +
    '<td colspan="2"><span contenteditable></span></td>' +
    '<td><span contenteditable>100.00</span></td>' +
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>'+
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>'+
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>' +
    '<td><span contenteditable></span></td>' ;



return emptyColumn;
}

请注意，第一个跨度具有类：“itemcode”

这是我的 jquery 代码：

$("#inventory_table .itemcode").on("focus", function(){
alert( "On focus for table inventory called." );

alert($(this).text());
});

表 id 是“inventory_table”。

此 jquery 事件侦听器未与动态生成的行绑定。

感谢任何帮助。

谢谢

Answer 1

假设你有这样一张桌子：

<table id="products">
<tbody>
<tr><td><input type="text" class="productid"></td><td><input type="text"></td><td><input type="text"></td></tr>
<tr><td><input type="text" class="productid"></td><td><input type="text"></td><td><input type="text"></td></tr>
</tbody>
</table>

你可以在类中附加一个监听事件：

$( "#products .productid" ).on( "change", function() {
 // do your AJAX here
});

您可以将$(this) 传递给AJAX 响应的回调函数以获取行。从那里，您可以跳转到第 2、第 3 列。

$(this).closest('tr').find('td:nth-child(2) input').val(x) // Insert value for second column
$(this).closest('tr').find('td:nth-child(3) input').val(y) // Insert value for third column

如果输入的类为.productid，则您添加的任何空白新行都将具有相同的功能