html table 添加行
时间: 2023-07-01 14:15:47 浏览: 31
要向 HTML 表格添加行,可以使用 JavaScript 或 jQuery。以下是两种方法:
1. 使用 JavaScript:
```html
<table id="myTable">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "New Row, Column 1";
cell2.innerHTML = "New Row, Column 2";
}
</script>
```
2. 使用 jQuery:
```html
<table id="myTable">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function addRow() {
var table = $("#myTable");
var row = $("<tr>");
var cell1 = $("<td>").html("New Row, Column 1");
var cell2 = $("<td>").html("New Row, Column 2");
row.append(cell1);
row.append(cell2);
table.append(row);
}
</script>
```
这两种方法都会在表格的最后一行添加一个新的行,并填充两个单元格。你可以根据需要进行修改。