HTML5+CSS3网页设计：Table增删改查

在网页设计中，Table（表格）是一种常见的数据展示和编辑方式。通过使用HTML5和CSS3技术，我们可以创建具有交互性的表格，实现数据的增删改查等功能。本文将介绍如何使用HTML5和CSS3来设计一个包含增删改查功能的表格，并提供相应的代码示例。

1. HTML结构

首先，我们需要定义一个HTML的结构来容纳表格。可以使用<table>元素作为表格的容器，<tr>元素表示表格的行，<td>元素表示表格的单元格。以下是一个简单的HTML结构示例：

<table>
   <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
   </tr>
   <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
   </tr>
   <tr>
      <td>李四</td>
      <td>30</td>
      <td>女</td>
   </tr>
</table>

在上述代码中，我们定义了一个简单的表格，包括表头和两行数据。表头使用<th>元素定义，表格数据使用<td>元素定义。

2. CSS样式

接下来，我们可以使用CSS样式来美化表格，并为其添加交互功能。以下是一个基本的CSS样式示例：

table {
   width: 100%;
   border-collapse: collapse;
}

th, td {
   padding: 8px;
   text-align: left;
   border-bottom: 1px solid #ddd;
}

tr:hover {
   background-color: #f5f5f5;
}

th {
   background-color: #4CAF50;
   color: white;
}

在上述代码中，我们设置了表格的宽度为100%，使用了折叠的边框样式，并为表头和表格数据设置了一些基本样式。当鼠标悬停在表格行上时，会有一个背景颜色的变化。

3. 表格增删改查

3.1 增加数据

要实现表格的数据增加功能，我们可以使用JavaScript来动态地向表格中添加行和单元格。以下是一个简单的JavaScript函数示例：

function addRow() {
   var table = document.getElementById("myTable");
   var row = table.insertRow(table.rows.length);
   var cell1 = row.insertCell(0);
   var cell2 = row.insertCell(1);
   var cell3 = row.insertCell(2);
   cell1.innerHTML = "王五";
   cell2.innerHTML = "28";
   cell3.innerHTML = "男";
}

在上述代码中，我们通过getElementById()方法获取到表格元素，并使用insertRow()和insertCell()方法动态地插入行和单元格。然后，我们可以使用innerHTML属性将数据添加到相应的单元格中。

3.2 删除数据

要实现表格的数据删除功能，我们可以使用JavaScript来动态地删除行。以下是一个简单的JavaScript函数示例：

function deleteRow(row) {
   var i = row.parentNode.parentNode.rowIndex;
   document.getElementById("myTable").deleteRow(i);
}

在上述代码中，我们通过parentNode属性获取到行的父节点（即表格），并使用rowIndex属性获取到行的索引。然后，我们可以使用deleteRow()方法删除相应的行。

3.3 修改数据

要实现表格的数据修改功能，我们可以使用JavaScript来动态地修改单元格的内容。以下是一个简单的JavaScript函数示例：

function editCell(cell) {
   var input = document.createElement("input");
   input.value = cell.innerHTML;
   cell.innerHTML = "";
   cell.appendChild(input);
   input.focus();
   input.addEventListener("blur", function() {
      cell.innerHTML = input.value;
   });
}

在上述代码中，我们通过createElement()方法创建一个输入框，并将单元格的内容赋值给输入框。然后，我们将输入框添加到单元格中，并设置焦点。当输入框失去焦点时，我们将输入框的值赋值给单元格，并移除输入框。

4.