Question

我对HTML和Javascript非常陌生。我创建了一个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>

Answer 1

执行以下操作，在每个<div contenteditable="true"></div>中插入一个<td></td>：

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

Answer 2

新单元格不可编辑的原因是，您尚未将contenteditable设置为true。就像第一行一样，每个单元格必须通过以下语句对其进行设置：
```
cell.setAttribute('contenteditable', true);
```
具有删除按钮的最后一个单元格不可编辑。 addRow()现在迭代.insertCell() 10次，并在每行的第10 个单元格上添加一个.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执行了类似的操作。尝试使用前者，因为当.innerHTML呈现HTML时，它不会破坏HTML。

注意：该表已注册到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>

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

2 个答案: