html网页制作表格代码,能增删改

以下是一个基本的 HTML 表格代码：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>25</td>
      <td>
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>30</td>
      <td>
        <button>编辑</button>
        <button>删除</button>
      </td>
    </tr>
  </tbody>
</table>

其中，`<table>` 表示表格，`<thead>` 表示表头，`<th>` 表示表头单元格，`<tbody>` 表示表格主体，`<tr>` 表示表格行，`<td>` 表示表格单元格。

如果要增加一行数据，只需要在 `<tbody>` 中添加一个新的 `<tr>` 行即可。例如：

<tbody>
  <tr>
    <td>王五</td>
    <td>男</td>
    <td>35</td>
    <td>
      <button>编辑</button>
      <button>删除</button>
    </td>
  </tr>
</tbody>

如果要删除一行数据，只需要删除相应的 `<tr>` 行即可。

如果要编辑一行数据，可以在 `<td>` 中添加一个编辑按钮，点击按钮后弹出一个编辑框，用户可以修改数据。例如：

<td>
  <button onclick="editRow(this)">编辑</button>
  <button>删除</button>
</td>

其中，`onclick="editRow(this)"` 表示点击按钮时执行一个名为 `editRow` 的 JavaScript 函数，并将当前按钮元素作为参数传入。

JavaScript 代码可以使用 DOM 对象来操作表格。例如，以下代码实现了编辑按钮的功能：

function editRow(btn) {
  // 获取当前行
  var row = btn.parentNode.parentNode;
  // 获取当前行的单元格
  var cells = row.getElementsByTagName("td");
  // 将单元格中的文本添加到输入框中
  for (var i = 0; i < cells.length - 1; i++) {
    var cell = cells[i];
    var text = cell.innerText;
    var input = document.createElement("input");
    input.type = "text";
    input.value = text;
    cell.innerText = "";
    cell.appendChild(input);
  }
  // 将编辑按钮变为保存按钮
  var editBtn = btn;
  var saveBtn = document.createElement("button");
  saveBtn.innerText = "保存";
  saveBtn.onclick = function() {
    // 将输入框中的文本保存到单元格中
    for (var i = 0; i < cells.length - 1; i++) {
      var cell = cells[i];
      var input = cell.getElementsByTagName("input")[0];
      var text = input.value;
      cell.removeChild(input);
      cell.innerText = text;
    }
    // 将保存按钮变为编辑按钮
    row.removeChild(cells[cells.length - 1]);
    row.appendChild(editBtn);
  };
  row.removeChild(cells[cells.length - 1]);
  row.appendChild(saveBtn);
}

这段代码首先获取当前行，然后获取当前行的单元格，将单元格中的文本添加到输入框中，将编辑按钮变为保存按钮。当用户点击保存按钮时，将输入框中的文本保存到单元格中，将保存按钮变为编辑按钮。