Question

我有一个Django发票项目，后端有产品，制造商等。

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

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

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

我怀疑是怎么做的。

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

编辑1

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

foreach(var chNode in secondNode.ChildNodes)
{
    firstNode.AppendChild(chNode );
}   
Doc.RemoveChild(secondNode);

请注意，第一个范围有class：＆＃34; itemcode＆＃34;

这是我的jquery代码：

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;
}

表格ID为＆＃34; inventory_table＆＃34;。

此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

，您添加的任何空白新行都将具有相同的功能

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

1 个答案: