如何在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，使其隐藏。
这样，当用户勾选复选框时，相应的行将根据复选框的状态进行显示或隐藏。
注意：上述示例中只涉及前端实现，没有涉及后端、数据库等其他技术。具体的应用场景和推荐的腾讯云产品，可以根据实际需求进行选择和开发。
相关·内容
我尝试根据复选框中的用户选择显示表行。我在控制台中收到一个错误。因为我是JavaScript的新手，并且我重用了Show/Hide Table Rows based on Checkbox中的这段代码，所以如果有任何帮助，我将非常感激。怎么可能比较它，虽然我需要匹配数据库值，我没有明确指定，如国家名称，所有它来自数据库 错误： (index):344 Uncaught ReferenceError: show Hide i
浏览 14提问于2021-10-22得票数 1
我已经开始使用这个模板，在未来我必须使用许多表，但是它们在这个模板中使用NG2智能表，我发现了许多but和问题，我已经列出了以下简单的需求。添加复选框列(尝试添加，但它只是禁用)
网格在手机上没有响应，而且登录到我的项目的仪表板需要很长时间，我检查了chrome的网络选项卡，它下载了36.4 mb的资源(chrome developer工具中的资源是什么?)是否有任何良好的数据表模块或库可用于创建企业级项目？
浏览 2提问于2020-04-17得票数 1
回答已采纳
1回答
我有一堆过滤器，它们被呈现为复选框列表。这些清单可能很长(例如国家和地区)。在页面加载中，我只想为每个类别显示8个选项，下面有一个更多的按钮。如果用户单击更多，那么只需扩展该类别的选项列表。chkBoxCountryNameList.Items[i].Attributes.CssStyle["display"] = "none";
这是可行的，但是当ASP.NET呈现CheckBoxList时，它使用一个表来实现，每个CheckBox控件都嵌套在自己的元素中。这意味
浏览 1提问于2013-12-06得票数 0
回答已采纳
2回答
文章的多类选择系统我理解在这个表中多添加一个关系表&保存文章ID和类别ID的整个概念。但是不知道如何使用数组实现多个选择系统中的新项目表单&编辑项目表单。早些时候，我在表单中显示</
浏览 2提问于2012-03-24得票数 2
回答已采纳
我有一个在for each loop.Each行中显示记录的表，它有一个复选框来显示选定的行。 我希望跟踪表中选定的行，以便当我导航回已选定行的页面时，可以看到复选框处于选中状态。 我的问题。1.我能以某种方式做到这一点，而不是将javascript与bootstrap一起注入，或者在代码背后注入一些逻辑吗？ 如果不是，我还可以使用什么其他逻辑来绑定复选框？(我在
浏览 31提问于2020-09-02得票数 0
回答已采纳
可以基于一些配置文档创建Xpages吗？表单生成器之类的东西。允许用户选择他们想要在表单上的字段和格式，例如带有一些行的表，其中将包括字段，如编辑框，单选按钮，复选框，下拉列表等，然后基于此配置文档生成XPages。
浏览 0提问于2016-03-09得票数 0
1回答
我有一个html表，每行都有一个复选框。我的javascrpt基于表上方的文本框过滤行。我需要一个函数，它只检查可见行上的框。我很困惑。<td><input type="checkbox" id="(coun
浏览 3提问于2022-08-22得票数 1
目前正在开发基于vanilla javascript的自动补全。一些我如何在工作条件下自动完成，但我需要附加复选框在自动完成列表中的多个选择，用户必须选择复选框，然后它将应用于字段，例如，如果用户在文本字段中键入IND，结果将显示与复选框印度和再次，如果用户键入ZIM与复选框ZIM在文本字段中。
浏览 1提问于2015-09-03得票数 0
然而，由于我有多对多的关系，我决定通过复选框来显示多个选项。不幸的是，这些复选框的范围取决于表单中可用的选择字段。你能建议一下可能的解决方案吗？致以亲切的问候，
浏览 2提问于2010-05-30得票数 0
回答已采纳
2回答
我有一个HTML表(它从数据库中获取数据，但在点之外)，它的每一行都有一个复选框。有没有一种简单的方法可以让用户通过单击行中的任意位置而不是复选框本身来选中复选框？我知道使用javascript可以做到这一点，但是在rails中有没有简单的方法呢？有没有人知道网上有什么精品或教程？
浏览 0提问于2011-08-23得票数 1
回答已采纳
2回答
我使用了vue类型记录管理和元素-ui中的代码，并且在选中复选框项目表后将使用属性highlight-current-row。当代码highlight-current-row添加属性表时，使用单个select。但是，当在复选框中添加多个选择时，它不是函数
如何在vueJS中的行项表复选框中突出显示？
浏览 2提问于2020-05-08得票数 0
回答已采纳
1回答
我想复选框表中的行。行号存储在变量rowNum中。在选择器中，它显示<webctrl id='tblResult_0' tag='INPUT' type='checkbox' /> This选择第0行。我想选择存储在rowNum中的内容。我如何在UiPath中做到这
浏览 33提问于2021-10-06得票数 1
我有一个jQuery数据表，它的一列中只有一个复选框。如何在该列上实现过滤器(使用checked和uncheked选项)，在选择或下拉时，应该使用checked/unchecked复选框过滤和显示行？
浏览 1提问于2014-09-14得票数 0
我的sql表中有一些问题，需要动态使用radiobutton和checkbox在网格中显示问题和选择。我的sql数据表
question_id(int) | choice1 | choice 2 | choice3 | choice4 | correctanswer.这里所做的假设是，如果正确答案长度为=1，则它是单选按钮控件类型，否则如果为correctanswer > 1，则它是复选框类型。基于此，有人可以帮助我如何在网格中
浏览 3提问于2012-06-05得票数 0
我有一个页面，我在表格中显示数据。用户可以选择许多行，即复选框，并对其进行修改，但用户也可以按取消。在取消时，应显示原始值(并且行再次变为不可编辑)。但是取消操作是如何在Javascript中实现的呢？我们是否将数据
浏览 1提问于2013-06-04得票数 7
1回答
我有一个JSF表，其中包含复选框和分页。我有以下问题:我希望将所有行选择到所有表页中并删除它们。简单的方法是创建Java hashmap并存储密钥。然后Java方法将使用hashmap中的键删除它们，但是如果hashmap超过100万会发生什么呢？也许是内存泄漏？也许解决方案是使用这个简单的JavaScript来选择所有复选框：function sel
浏览 1提问于2012-05-22得票数 0
4回答
我想用django- table 2创建一个表，这样不同的行具有不同的属性。<tr class="odd"><tr class="even"><input type="checkbox" name="col" value="123"/>
这对于找出选中了哪个<
浏览 7提问于2012-03-01得票数 8
回答已采纳
如链接中所述，我可以在asp.net can表单页面中创建复选框列表。<input type='checkBox'
浏览 1提问于2017-04-07得票数 1
1回答
我在尝试使用复选框作为基于视图的表格中的selectedIndex时遇到了一些困难。这里有关于基于视图的表的很好的文档：我的视图是一个对Yahoo Finance进行标注的表格。该表是使用绑定构建的基于视图的表。
当表格被填充时，我希望对每一行都有一个复选框，这样当用户单击复选框时，该行将从Yahoo更新。目前，
浏览 0提问于2011-12-31得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
