1.点击全选复选框时,全选下面四个复选框,再点全选复选框时取消全选; 2.当鼠标进入表格和离开表格时,改变表格背景色,颜色自定义; 3.点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行。
时间: 2024-03-17 07:40:34 浏览: 60
好的,这是三个问题,我会依次回答。
1. 实现点击全选复选框时,全选下面四个复选框,再点全选复选框时取消全选的功能,可以通过以下代码实现:
```html
<input type="checkbox" id="selectAll" onclick="selectAllCheckBoxes()">全选
<input type="checkbox" class="checkBox">选项1
<input type="checkbox" class="checkBox">选项2
<input type="checkbox" class="checkBox">选项3
<input type="checkbox" class="checkBox">选项4
<script>
function selectAllCheckBoxes() {
var checkBoxes = document.getElementsByClassName("checkBox");
var selectAllCheckBox = document.getElementById("selectAll");
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].checked = selectAllCheckBox.checked;
}
}
</script>
```
2. 实现当鼠标进入表格和离开表格时,改变表格背景色,颜色自定义的功能,可以通过以下代码实现:
```html
<table id="myTable" onmouseover="changeBackgroundColor('red')" onmouseout="changeBackgroundColor('white')">
<tr>
<td>行1列1</td>
<td>行1列2</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
</tr>
</table>
<script>
function changeBackgroundColor(color) {
var table = document.getElementById("myTable");
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].style.backgroundColor = color;
}
}
}
</script>
```
3. 实现点击删除按钮时,判断是否有复选框被选中,如果没有复选框被选中则提示用户进行选择,否则确认删除,并从表格中删除相应行的功能,可以通过以下代码实现:
```html
<table>
<tr>
<td><input type="checkbox" class="checkBox"></td>
<td>行1列1</td>
<td>行1列2</td>
</tr>
<tr>
<td><input type="checkbox" class="checkBox"></td>
<td>行2列1</td>
<td>行2列2</td>
</tr>
</table>
<button onclick="deleteRows()">删除</button>
<script>
function deleteRows() {
var checkBoxes = document.getElementsByClassName("checkBox");
var isAnyCheckBoxSelected = false;
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
isAnyCheckBoxSelected = true;
break;
}
}
if (!isAnyCheckBoxSelected) {
alert("请选择要删除的行!");
} else {
var table = document.getElementsByTagName("table")[0];
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
table.deleteRow(i + 1);
i--;
}
}
}
}
</script>
```
阅读全文