html页面,有10行的表格,每一行有一个勾选项,点击按钮增加一行,点击删除按钮,删除选定的行
时间: 2024-10-04 18:01:12 浏览: 51
在HTML页面中创建一个动态表格,你可以使用JavaScript配合HTML来实现这个功能。首先,你需要一个基本的表格结构,每个单元格包含一个复选框和删除按钮。当点击“增加”按钮时,会追加新的行;点击“删除”按钮则会移除选中的行。
HTML部分:
```html
<table id="dynamicTable">
</table>
<button onclick="addRow()">增加</button>
<button onclick="removeSelected()">删除</button>
```
JavaScript部分:
```javascript
var counter = 0;
function addRow() {
counter++;
var table = document.getElementById('dynamicTable');
var row = table.insertRow(counter);
var checkbox = row.insertCell(0).appendChild(document.createElement('input'));
checkbox.type = 'checkbox';
var deleteButton = row.insertCell(row.cells.length).appendChild(document.createElement('button'));
deleteButton.textContent = '删除';
deleteButton.onclick = function() { removeRow(this.parentNode); };
}
function removeRow(row) {
row.remove(); // 删除指定行
}
// 初始化表格
for (let i = 0; i < 10; i++) {
addRow();
}
```
当你点击“增加”按钮时,会自动在表格底部插入一个新的行;而点击“删除”按钮时,需要确保它关联到正确的行,所以我们在删除按钮的`onclick`事件中引用了`this.parentNode`获取当前行元素。
阅读全文
相关推荐


















