js动态生成表格需要单击来进行添加和删除
时间: 2024-02-27 21:52:45 浏览: 19
是的,通常情况下,动态生成表格需要单击按钮来进行添加和删除行列。以下是一个示例代码:
HTML代码:
```html
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<button onclick="addRow()">添加行</button>
<button onclick="addColumn()">添加列</button>
<button onclick="deleteRow()">删除行</button>
<button onclick="deleteColumn()">删除列</button>
```
JavaScript代码:
```javascript
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var nameCell = row.insertCell(0);
var ageCell = row.insertCell(1);
nameCell.innerHTML = "张三";
ageCell.innerHTML = "25";
}
function addColumn() {
var table = document.getElementById("myTable");
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
var cell = rows[i].insertCell();
cell.innerHTML = "数据";
}
}
function deleteRow() {
var table = document.getElementById("myTable");
table.deleteRow(-1);
}
function deleteColumn() {
var table = document.getElementById("myTable");
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
rows[i].deleteCell(-1);
}
}
```
在这个示例中,我们添加了两个按钮,`deleteRow()`函数用于删除表格的最后一行,`deleteColumn()`函数用于删除表格的最后一列。在这里,我们使用`deleteRow()`和`deleteCell()`方法来删除行和单元格。