js点击按钮添加表格数据
时间: 2023-09-10 12:06:53 浏览: 215
JavaScript中动态向表格添加数据
5星 · 资源好评率100%
你可以使用JavaScript来添加表格数据。以下是一个简单的示例:
1. 在HTML中创建一个空表格和一个按钮:
```
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<!-- 这里是空的,用于添加数据 -->
</tbody>
</table>
<button onclick="addRow()">添加一行数据</button>
```
2. 在JavaScript中编写addRow函数,用于添加一行数据到表格中:
```
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "数据1";
cell2.innerHTML = "数据2";
cell3.innerHTML = "数据3";
}
```
这个函数会在表格的末尾插入一行数据,每一列的数据都是固定的,你可以根据自己的需求修改或者从其他地方获取数据来添加到表格中。
阅读全文