js 编写代码网页上的表格的删除和修改

以下是一个简单的示例代码，用于在网页上删除和修改表格中的行：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
      <td>
        <button onclick="editRow(this)">编辑</button>
        <button onclick="deleteRow(this)">删除</button>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
      <td>
        <button onclick="editRow(this)">编辑</button>
        <button onclick="deleteRow(this)">删除</button>
      </td>
    </tr>
  </tbody>
</table>

在上面的表格中，每行都有一个“编辑”和“删除”按钮。这些按钮每个都有一个 onclick 属性，指向 JavaScript 中的一个函数。

JavaScript 代码：

function deleteRow(btn) {
  var row = btn.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

function editRow(btn) {
  var row = btn.parentNode.parentNode;
  var cells = row.getElementsByTagName("td");
  for (var i = 0; i < cells.length - 1; i++) {
    var input = document.createElement("input");
    input.type = "text";
    input.value = cells[i].innerText;
    cells[i].innerText = "";
    cells[i].appendChild(input);
  }
  var saveButton = document.createElement("button");
  saveButton.innerText = "保存";
  saveButton.onclick = function() {
    saveRow(row);
  };
  btn.parentNode.replaceChild(saveButton, btn);
}

function saveRow(row) {
  var cells = row.getElementsByTagName("td");
  for (var i = 0; i < cells.length - 1; i++) {
    var input = cells[i].getElementsByTagName("input")[0];
    cells[i].innerText = input.value;
  }
  var editButton = document.createElement("button");
  editButton.innerText = "编辑";
  editButton.onclick = function() {
    editRow(editButton);
  };
  var deleteButton = row.getElementsByTagName("button")[1];
  row.cells[row.cells.length - 1].replaceChild(editButton, deleteButton);
}

这个 JavaScript 代码定义了三个函数：

• deleteRow(btn)：从表格中删除行。
• editRow(btn)：编辑行，将单元格中的文本替换为可编辑的文本框，并将“编辑”按钮替换为“保存”按钮。
• saveRow(row)：保存编辑后的行数据，并将文本框替换为单元格中的文本，将“保存”按钮替换为“编辑”按钮。

这些函数通过按钮的 onclick 属性与 HTML 中的按钮关联。例如，当“删除”按钮被点击时，deleteRow() 函数将被调用，并传递该按钮作为参数。函数使用 parentNode 属性找到行，并从表格中删除该行。同样，当“编辑”按钮被点击时，editRow() 函数将被调用。该函数将单元格中的文本替换为输入框，并将“编辑”按钮替换为“保存”按钮。当“保存”按钮被点击时，saveRow() 函数将被调用。该函数将输入框中的值替换为单元格中的文本，并将输入框替换为文本，将“保存”按钮替换为“编辑”按钮。

请注意，这只是一个简单的示例代码，可能需要根据实际需求进行修改。例如，可以添加验证输入的数据的功能，以确保数据的有效性