时间戳

首页 > 解决方案 > 我可以在 HTML 表格中插入一行或单元格，然后可以通过单击单元格进行编辑吗？

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

问题描述

我对 HTML 和 Javascript 非常陌生。我创建了一个从数据库加载信息的 HTML 表。从数据库加载的信息存储在我已设为可编辑的单元格中。我有一个函数允许我向表中添加空行，然后我希望能够像表的其余部分一样通过单击来编辑它。我的目标是编辑表，然后使用提交更改按钮更新数据库。

我的问题是从数据库加载的单元格是可编辑的，但 Add Row 函数插入的空单元格不是。如何通过单击它们来修改它们？

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>

标签： javascripthtml

解决方案

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

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

推荐阅读