在 HTML table 中添加一个新行，即 contenteditable 并保存

Question

因此，我阅读了很多关于如何保存 contenteditable 更改并在 table 中插入新行的文章。但我想整合这两个功能。我已经采取了 `contenteditable 更改保存部分来自： https://www.developerdrive.com/allowing-users-to-edit-text-content-with-html5/

并从以下位置插入新的行部分：https://www.w3schools.com/jsref/met_table_insertrow.asp。当我同时使用这两个功能时，其中一个可以工作，但不能同时使用。该网站的主要目的是让一小部分用户可以看到可用的项目，他们可以向 list/table 添加新项目，他们所做的更改将被保存并对其他人可见。

Answer 1

这是因为 table 标签的 id。您的 table 有两个 ID。因此，从 table 中删除 id="myTable"，并在 myFunction 中将 myTable 替换为 edit

<table  id="edit" contenteditable="true" style="margin-right: auto; margin-left: auto;">
  <tr>
    <td>SAMPLE CELL</td>
    <td>1</td>
    <td>IN STOCK</td>
  </tr>
</table>

function myFunction() {
  var table = document.getElementById("edit");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = "NEW CELL";
  cell2.innerHTML = "1";
  cell3.innerHTML = "IN STOCK";
}

Here 是工作样本。

在 HTML table 中添加一个新行，即 contenteditable 并保存

Add a new row in a HTML table that is contenteditable and it is saved

html

javascript

html-table

contenteditable