在未选中复选框时隐藏表行,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h2>隐藏表行示例</h2>
<input type="checkbox" id="checkbox1" onchange="hideTableRow()">
<label for="checkbox1">隐藏第一行</label>
<input type="checkbox" id="checkbox2" onchange="hideTableRow()">
<label for="checkbox2">隐藏第二行</label>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
<script>
function hideTableRow() {
var table = document.getElementById("myTable");
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < table.rows.length; i++) {
if (!checkboxes[i].checked) {
table.rows[i+1].style.display = "none";
} else {
table.rows[i+1].style.display = "";
}
}
}
</script>
</body>
</html>
在上面的示例中,我们使用了一个简单的HTML表格,并在每个复选框上添加了一个事件监听器来调用hideTableRow()
函数。该函数遍历了表格的每一行,根据相应的复选框的选中状态来设置行的CSS属性,从而实现隐藏或显示表行的功能。
请注意,上述示例中的代码仅提供了一个基本的实现思路,实际应用中可能需要根据具体的需求进行适当的修改。另外,推荐的腾讯云相关产品和产品介绍链接地址与本问题无关,因此不在答案中提供。
领取专属 10元无门槛券
手把手带您无忧上云