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

Posted 2023-02-23

【中文标题】从动态添加的表行中获取数据

【英文标题】：Getting data from dynamically added table rows

【发布时间】：2016-07-18 18:21:39

【问题描述】：

我有一个 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 事件侦听器未与动态生成的行绑定。

感谢任何帮助。

谢谢

【参考方案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，则您添加的任何空白新行都将具有相同的功能

【讨论】：

请看我的编辑，似乎有一些问题。请求您的帮助

我不认为跨度可以接收“焦点”。如果您要使跨度内容可编辑，为什么不直接使用 <input type="text"> 呢？有关示例，请参见此 jsfiddle：jsfiddle.net/c9keLynn

我刚刚也检查了输入，它不起作用。并且 span 接收焦点模糊。 On Focus，后跟 on blur 是 on change 的替代品（只能用于输入）。为了与动态创建的元素绑定，我只调用了命名函数 - 它的工作是添加事件侦听器（我的代码的第二部分），每次添加新行时。

你用的是什么版本的jQuery？您可能需要使用 live() 而不是 on()。 Live 应该是动态绑定的，但在以后的版本中被替换为 on。

我使用 jQuery 1.12.0 。我明白你的意思！！但我相信 1.12 应该已经被替换了。无论哪种方式，我都需要检查一下。