代码生成:1.三列五排表格,第一排分别为全选复选框,姓名,出生日期;第二排分别为单选框,张文,1969-1-1;第三排分别为单选框,张武,1969-1-1;第四排分别为单选框,张双,1969-1-1;第五排分别为单选框,张全,1969-1-1; 2.点击全选复选框时,全选下面四个复选框,再点全选复选框时取消全选; 3.当鼠标进入表格和离开表格时,改变表格背景色,颜色自定义; 4.点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行。
时间: 2024-03-14 18:48:31 浏览: 88
利用Bootstrap实现表格复选框checkbox全选
以下是 JavaScript 代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格操作</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid black;
text-align: center;
}
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th><input type="checkbox" id="checkAll" onclick="selectAll()"></th>
<th>姓名</th>
<th>出生日期</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>张文</td>
<td>1969-1-1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>张武</td>
<td>1969-1-1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>张双</td>
<td>1969-1-1</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>张全</td>
<td>1969-1-1</td>
</tr>
</table>
<button onclick="deleteRows()">删除选中行</button>
<script>
var table = document.getElementById("myTable");
var checkboxes = document.getElementsByClassName("checkbox");
// 全选/取消全选
function selectAll() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = document.getElementById("checkAll").checked;
}
}
// 表格背景色变化
table.onmouseover = function() {
table.classList.add("selected");
};
table.onmouseout = function() {
table.classList.remove("selected");
};
// 删除选中行
function deleteRows() {
var numChecked = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
numChecked++;
table.deleteRow(i + 1);
i--;
}
}
if (numChecked === 0) {
alert("请选择要删除的行!");
}
}
</script>
</body>
</html>
```
以上代码实现了所需的功能:
1. 创建了一个三列五排的表格,第一排为全选复选框,姓名,出生日期,后面四排为不同的单选框;
2. 点击全选复选框时,全选下面四个复选框,再次点击全选复选框时取消全选;
3. 当鼠标进入表格和离开表格时,改变表格背景色,颜色为黄色;
4. 点击删除按钮时,判断是否有复选框被选中,如果没有则提示用户进行选择,否则确认删除,并从表格中删除相应行。
阅读全文