所以,我已经阅读了很多关于如何保存 contenteditable
更改并在表中插入新行的文章。但我想整合这两个功能。
我已经从以下内容中获取了`contenteditable更改保存部分:
https://www.developerdrive.com/allowing-users-to-edit-text-content-with-html5/
并插入一个新的行部分:https://www.w3schools.com/jsref/met_table_insertrow.asp。 当我同时使用这 2 个功能时,它们中的任何一个都有效,而不是两者都有效。 该网站的主要目的是让一小组用户可以看到可用的项目,他们可以添加新项目并添加到列表/表格中,并且他们所做的更改会被保存并对其他人可见。
答案 0 :(得分:0)
发生这种情况是因为表标记的 id
。您的表有两个 ID。因此,从表中删除 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 是工作样本。