使用jQuery动态编辑行

Question

我正在使用jquery执行添加，编辑和删除操作。

我已经创建了product.html文件和jsproduct.js文件。

我的问题是我单击编辑按钮并更改选择框值，然后按编辑产品按钮

但是选择框值无法显示表格

<script async src="//jsfiddle.net/kishankakadiya/m6sn39hp/1/embed/"></script>

检查演示

Answer 1

问题是您对表上的<td>元素使用了相同的ID。 您正在使用此计数器，结果是有多个<td id="1">并且jQuery无法正确处理它。

我将您的td更改为使用类而不是id，并为您的td添加了一个类前缀，如下所示：

'<td class="category-' + this.counter + ' ">' + product_category +'</td>'
'<td class="name-' + this.counter + '">' + product_name + '</td>'

在您的编辑功能中，我将该类用作选择器：

$(".category-" + this.id).text(product_category);
$('.name-' + this.id).text(product_name);

然后它可以正常工作。 您仍然在设置模式等方面遇到一些麻烦，但是希望您可以自己解决这些问题。

小提琴： https : //jsfiddle.net/ye6mugxe/1/