html table 添加行
时间: 2023-07-01 08:12:18 浏览: 46
在 HTML 表格中添加行的方法有多种,以下是其中两种常用的方法:
1. 使用 JavaScript 动态添加行:
```html
<!DOCTYPE html>
<html>
<head>
<title>添加行</title>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
<br>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "王五";
cell2.innerHTML = "24";
}
</script>
</body>
</html>
```
2. 在 HTML 中静态添加行:
```html
<!DOCTYPE html>
<html>
<head>
<title>添加行</title>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
</tr>
</table>
</body>
</html>
```
在第二种方法中,直接在 HTML 代码中添加新行,比较简单,但不够灵活。而第一种方法使用 JavaScript 动态添加行,可以在运行时根据需要添加行,更加灵活。