js 中完成动态生成表格案例, 动态创建行、单元格。 为单元格填充数据。 提供录入链接,
时间: 2024-03-17 18:43:04 浏览: 13
好的,这是一个比较常见的需求,我可以给您提供一个简单的实现代码,您可以参考一下:
HTML 代码:
```html
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<button onclick="addRow()">添加行</button>
```
JavaScript 代码:
```javascript
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(); // 创建新行
var nameCell = row.insertCell(); // 创建姓名单元格
var ageCell = row.insertCell(); // 创建年龄单元格
var genderCell = row.insertCell(); // 创建性别单元格
var linkCell = row.insertCell(); // 创建链接单元格
nameCell.innerHTML = "<input type='text' name='name'>";
ageCell.innerHTML = "<input type='text' name='age'>";
genderCell.innerHTML = "<select name='gender'><option value='male'>男</option><option value='female'>女</option></select>";
linkCell.innerHTML = "<a href='#'>录入</a>";
}
```
这段代码会在点击按钮时动态创建一行,并为每个单元格填充相应的数据和表单元素,同时提供一个录入链接。您可以根据需要进行修改和扩展。