HTML表格增加行
时间: 2023-07-27 19:19:42 浏览: 43
要在HTML表格中增加行,可以使用JavaScript来实现。以下是一些使用JavaScript添加行的示例:
1. 使用insertRow()方法添加行:
```html
<table id="myTable">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<script>
var table = document.getElementById("myTable");
var row = table.insertRow(); // 插入新行
var cell1 = row.insertCell(0); // 插入新列
var cell2 = row.insertCell(1);
cell1.innerHTML = "新行第一列"; // 设置单元格内容
cell2.innerHTML = "新行第二列";
</script>
```
2. 使用appendChild()方法添加行:
```html
<table id="myTable">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<script>
var table = document.getElementById("myTable");
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建新列
var cell2 = document.createElement("td");
cell1.innerHTML = "新行第一列"; // 设置单元格内容
cell2.innerHTML = "新行第二列";
row.appendChild(cell1); // 将新列添加到新行
row.appendChild(cell2);
table.appendChild(row); // 将新行添加到表格末尾
</script>
```
无论使用哪种方法,都需要在表格中添加一个空的行,然后将新的单元格添加到该行中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)