如何在javascript中基于复选框选择显示表行
在JavaScript中，可以使用复选框来选择要显示的表行。下面是一个实现该功能的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>显示表行</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>表格</h2>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>35</td>
</tr>
</tbody>
</table>
<h2>选择要显示的行</h2>
<input type="checkbox" id="row1" onclick="toggleRow(1)">
<label for="row1">第一行</label><br>
<input type="checkbox" id="row2" onclick="toggleRow(2)">
<label for="row2">第二行</label><br>
<input type="checkbox" id="row3" onclick="toggleRow(3)">
<label for="row3">第三行</label><br>
<script>
function toggleRow(rowNumber) {
var table = document.querySelector('table');
var row = table.rows[rowNumber];
if (row.style.display === 'none') {
row.style.display = '';
} else {
row.style.display = 'none';
}
}
</script>
</body>
</html>在上面的示例中，我们首先创建了一个简单的表格，包含姓名和年龄两列。然后在页面上创建了三个复选框，用于选择要显示的行。每个复选框都有一个对应的id，并使用onclick事件调用toggleRow()函数来切换行的显示状态。
toggleRow()函数根据传入的行号参数获取表格中对应的行，并通过修改行的style.display属性来切换行的显示和隐藏。如果行的display属性为none，则将其改为默认值''，使其显示；如果行的display属性不是none，则将其改为none，使其隐藏。
这样，当用户勾选复选框时，相应的行将根据复选框的状态进行显示或隐藏。
注意：上述示例中只涉及前端实现，没有涉及后端、数据库等其他技术。具体的应用场景和推荐的腾讯云产品，可以根据实际需求进行选择和开发。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
