我可以在 HTML 表格中插入一行或单元格，然后可以通过单击单元格进行编辑吗？答案

function addRow() { var table = document.getElementById("eventTable"); var row = table.insertRow(1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4); var cell6 = row.insertCell(5); var cell7 = row.insertCell(6); var cell8 = row.insertCell(7); var cell9 = row.insertCell(8); cell1.innerHTML = "IT WORKED" }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>View all Events </title> <link href="../static/menu.css" rel="stylesheet" /> </head> <body> <h2> View all Events in the Database </h2> <h3> Display Events in MySQL Database </h3> <button type="button" id="changeEvents" class="center2">Submit Changes</button> <button type='button' onclick="addRow();" id="addEvent" class='center2'> Add Event</button> <TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4"> <TR> <TH>ID</TH> <TH>Timestamp</TH> <TH>Filename</TH> <TH>Frequency</TH> <TH>Hostname</TH> <TH>Port</TH> <TH>Band</TH> <TH>Start Time</TH> <TH>End Time</TH> <TH>Delete</TH> </TR> <TR> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"></TD> <TD contenteditable="true"> <button type='button' id='delete0' 'class='center2 '> Delete Event </button></TD> </TR> </TABLE>

【解决方案1】：

在每个<td></td> 中插入一个<div contenteditable="true"></div>，方法是：

cell1.innerHTML = '<div contenteditable="true"></div>'

【讨论】：

不，我希望在从网页添加一行时自动编辑单元格，我不想在打开页面后必须返回代码。
我做了更改。 TD 元素本身不可编辑，它们需要有一个 SPAN 或 DIV 容器才能进行编辑。
它们实际上是可自行编辑的。我帖子底部的“”代码可以使单元格可编辑。我的问题是当我使用 insertRow 和 insertCell 添加新行时，这些单元格不可编辑，我想更改它。
IE不兼容跨浏览器
如果你坚持，你可以这样做：cell1.setAttribute("contentEditable", true)

【解决方案2】：

新单元格不可编辑的原因是您没有将contenteditable 设置为true。就像每个单元格必须通过以下语句设置的第一行一样：
```
cell.setAttribute('contenteditable', true);
```
最后一个有删除按钮的单元格不应该是可编辑的。 addRow() 现在迭代 .insertCell() 10 次，并在每行的第 10^th 个单元格上添加一个 .delete 按钮。 delRow() 也已添加。

请注意，onevent 属性已被移除并替换为 onevent 属性：

// onevent attributes are stinky code smells
<button onclick="addRow()"... 

// onevent properties are far better
document.querySelector('button').onclick = addRow;

注意：.insertAdjacentHTML() 用于在每一行上创建一个 .delete 按钮。您可能会看到.innerHTML 执行的类似操作。尝试使用前者，因为它在呈现 HTML 时不会破坏，而 .innerHTML 会。

注意：该表已注册到 click 事件，并专门监听对任何 .delete 按钮的任何点击。因为新的.delete 按钮在页面加载时不存在，所以不能为诸如“点击”之类的事件注册它们。因此，任何动态创建的元素都需要一个祖先元素（父、祖父、文档、窗口等）来监听事件。

const table = document.getElementById("eventTable");

document.getElementById('addEvent').onclick = addRow;
table.onclick = delRow;

function delRow(e) {
  if (e.target.matches('.delete')) {
    let row = e.target.closest('tr');
    row.remove();
  }
}

function addRow() {
  let row = table.insertRow(1);
  for (let i = 0; i < 10; i++) {
    let cell = row.insertCell(i);
    if (i === 9) {
      cell.insertAdjacentHTML('beforeend', `<button type='button' class='center2 delete'> Delete Event </button>`);
      break;
    }
    cell.setAttribute('contenteditable', true);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>View all Events </title>
  <link href="../static/menu.css" rel="stylesheet" />
</head>

<body>
  <h2> View all Events in the Database </h2>
  <h3> Display Events in MySQL Database </h3>
  <button type="button" id="changeEvents" class="center2">Submit Changes</button>
  <button type='button' id="addEvent" class='center2'> Add Event</button>

  <TABLE id="eventTable" border="1" style="border: 1px solid #000000; border-collapse: collapse;" cellpadding="4">
    <TR>
      <TH>ID</TH>
      <TH>Timestamp</TH>
      <TH>Filename</TH>
      <TH>Frequency</TH>
      <TH>Hostname</TH>
      <TH>Port</TH>
      <TH>Band</TH>
      <TH>Start Time</TH>
      <TH>End Time</TH>
      <TH>Delete</TH>
    </TR>
    <TR>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD contenteditable="true"></TD>
      <TD>
        <button type='button' class='center2 delete'> Delete Event </button></TD>
    </TR>
  </TABLE>

【讨论】：