代码生成:1.三列五排表格,第一排分别为全选复选框,姓名,出生日期;第二排分别为单选框,张文,1969-1-1;第三排分别为单选框,张武,1969-1-1;第四排分别为单选框,张双,1969-1-1;第五排分别为单选框,张全,1969-1-1; 2.点击全选复选框时,全选下面四个复选框,再点全选复选框时取消全选; 3.当鼠标进入表格和离开表格时,改变表格背景色,颜色自定义; 4.点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行。
时间: 2024-03-14 11:48:20 浏览: 77
JS中如何实现复选框全选功能
以下是基于HTML、CSS和JavaScript的代码实现:
HTML部分:
```html
<table id="myTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>姓名</th>
<th>出生日期</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="selectRow"></td>
<td>张文</td>
<td>1969-1-1</td>
</tr>
<tr>
<td><input type="checkbox" class="selectRow"></td>
<td>张武</td>
<td>1969-1-1</td>
</tr>
<tr>
<td><input type="checkbox" class="selectRow"></td>
<td>张双</td>
<td>1969-1-1</td>
</tr>
<tr>
<td><input type="checkbox" class="selectRow"></td>
<td>张全</td>
<td>1969-1-1</td>
</tr>
</tbody>
</table>
<button id="deleteBtn">删除</button>
```
CSS部分:
```css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px;
}
th {
text-align: left;
}
#myTable tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
```
JavaScript部分:
```javascript
// 全选复选框的点击事件
document.getElementById("selectAll").addEventListener("click", function() {
var selectAll = this.checked;
var selectRows = document.getElementsByClassName("selectRow");
for (var i = 0; i < selectRows.length; i++) {
selectRows[i].checked = selectAll;
}
});
// 表格的鼠标进入和离开事件
document.getElementById("myTable").addEventListener("mouseover", function() {
this.style.backgroundColor = "#eee";
});
document.getElementById("myTable").addEventListener("mouseout", function() {
this.style.backgroundColor = "";
});
// 删除按钮的点击事件
document.getElementById("deleteBtn").addEventListener("click", function() {
var selectRows = document.getElementsByClassName("selectRow");
var hasSelected = false;
for (var i = 0; i < selectRows.length; i++) {
if (selectRows[i].checked) {
hasSelected = true;
var row = selectRows[i].parentNode.parentNode;
row.parentNode.removeChild(row);
}
}
if (!hasSelected) {
alert("请先选择要删除的行!");
}
});
```
以上代码实现了要求的所有功能,包括全选、鼠标进入离开改变背景色、删除行等。其中,CSS部分实现了表格的基本样式,JavaScript部分实现了具体的交互逻辑。
阅读全文