在JavaScript中使用复选框动态添加表列,可以通过以下步骤实现:
<table id="myTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll" onchange="selectAllRows()"></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
function selectAllRows() {
var checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
var selectAllCheckbox = document.getElementById('selectAll');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = selectAllCheckbox.checked;
}
if (selectAllCheckbox.checked) {
addColumn();
} else {
removeColumn();
}
}
function addColumn() {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var cell = document.createElement('td');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
cell.appendChild(checkbox);
rows[i].appendChild(cell);
}
}
function removeColumn() {
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].lastElementChild.remove();
}
}
window.onload = function() {
selectAllRows();
};
这样,当用户勾选或取消全选复选框时,表格将动态添加或删除一列复选框。
领取专属 10元无门槛券
手把手带您无忧上云