我需要一个前端表格带有js功能的,表格中是一个按钮1,点击一次会往表格添加一行,每一行都有另外一个按钮2,点击按钮2会往当前行添加多一个单元格
时间: 2024-02-24 08:59:07 浏览: 67
好的,您可以参考下面的代码实现:
HTML部分:
```html
<table id="myTable">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td><button onclick="addRow(this)">添加行</button></td>
</tr>
</tbody>
</table>
```
JavaScript部分:
```javascript
function addRow(btn) {
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
var newRow = tbody.insertRow(btn.parentNode.parentNode.rowIndex + 1);
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
var newCell3 = newRow.insertCell(2);
newCell1.innerHTML = "新内容1";
newCell2.innerHTML = "新内容2";
newCell3.innerHTML = "<button onclick='addCell(this)'>添加单元格</button>";
}
function addCell(btn) {
var newRow = btn.parentNode.parentNode;
var newCell = newRow.insertCell(newRow.cells.length - 1);
newCell.innerHTML = "新单元格";
}
```
在上面的示例代码中,我们通过`document.getElementById`获取到了表格元素,然后通过`insertRow`方法和`insertCell`方法动态添加行和单元格。在添加行时,我们还给每行添加了一个“添加单元格”的按钮,并通过`onclick`事件调用`addCell`函数添加单元格。
阅读全文