阅读量:0
使用Bootstrap的表格全选功能，可以通过添加一个复选框并使用JavaScript实现。具体操作如下：，，1. 在表格的第一行添加一个复选框；，2. 为复选框添加一个点击事件，当点击时触发全选或全不选的功能；，3. 使用JavaScript遍历表格的每一行，为每一行的复选框添加点击事件，当选中或取消选中时更新表格中的复选框状态。，，以下是一个简单的示例代码：，，``html，，，， ， ， Bootstrap表格全选， ，，， ， ， ， ， ， 姓名， 年龄， ， ， ， ， ， 张三， 25， ， ， ， 李四， 30， ， ， ， 王五， 35， ， ， ， ， ， ， document.getElementById('selectAll').addEventListener('change', function() {， var selectAll = this.checked;， var selectItems = document.getElementsByClassName('selectItem');， for (var i = 0; i < selectitems.length;="" i++)="" {，="" selectitems[i].checked="selectAll;，" }，="" });，="">``，，在这个示例中，我们首先在表格的第一行添加了一个复选框，并为其添加了一个点击事件。我们使用JavaScript遍历表格的每一行，为每一行的复选框添加点击事件。当选中或取消选中时，更新表格中的复选框状态。Bootstrap表格全选功能可以通过JavaScript实现，以下是一个简单的示例：
1、我们需要在HTML中创建一个表格，并添加一个全选按钮：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>Bootstrap表格全选</title> <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h2>表格全选</h2> <table class="table tablebordered"> <thead> <tr> <th><input type="checkbox" id="checkAll"></th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="checkItem"></td> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td><input type="checkbox" class="checkItem"></td> <td>李四</td> <td>30</td> <td>女</td> </tr> <!更多行数据 > </tbody> </table> </div> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script> <script src="main.js"></script> </body> </html>
2、接下来，我们需要编写JavaScript代码来实现全选和取消全选功能：
// main.js document.getElementById('checkAll').addEventListener('change', function() { var checkItems = document.getElementsByClassName('checkItem'); for (var i = 0; i < checkItems.length; i++) { checkItems[i].checked = this.checked; } }); 这个示例中，我们首先在HTML中创建了一个表格，并添加了一个全选按钮，我们使用JavaScript监听全选按钮的点击事件，当全选按钮被点击时，遍历表格中的所有复选框，将它们的选中状态设置为与全选按钮相同。
