使用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/