点击按钮新增一行表格
时间: 2023-07-05 14:18:43 浏览: 361
JS实现点击按钮表新增一行
5星 · 资源好评率100%
要在网页中通过点击按钮来新增一行表格,可以使用 JavaScript 来实现。可以按照以下步骤:
1. 首先,在 HTML 文件中创建一个按钮,添加一个单击事件监听器,当按钮被点击时,调用一个 JavaScript 函数。
2. 创建一个 JavaScript 函数,当该函数被调用时,它将获取当前表格的引用并向其中添加一行。
3. 在 JavaScript 函数中,使用 insertRow() 方法向表格中添加一行,使用 insertCell() 方法向新行中添加单元格,以及使用 innerHTML 属性来设置新单元格中的内容。
以下是示例代码:
```
<!DOCTYPE html>
<html>
<body>
<button onclick="addRow()">新增一行</button>
<table id="myTable">
<tr>
<th>学生姓名</th>
<th>学号</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>001</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>002</td>
<td>19</td>
</tr>
</table>
<script>
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 = "新学号";
cell3.innerHTML = "新年龄";
}
</script>
</body>
</html>
```
当按钮被点击时,addRow() 函数将在表格中添加一行,并将其填充为新学生的信息。可以根据需要更改表格的 ID 和单元格中的内容。
阅读全文