利用Bootstrap实现表格复选框checkbox全选


Posted in Javascript onDecember 21, 2016

首先来看看实现的效果图:

利用Bootstrap实现表格复选框checkbox全选

利用Bootstrap实现表格复选框checkbox全选

HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了:

<table class="table table-bordered table-hover">
 <thead>
 <tr class="success">
 <th>类别编号</th>
 <th>类别名称</th>
 <th>类别组</th>
 <th>状态</th>
 <th>说明</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>C00001</td>
 <td>机车</td>
 <td>机车</td>
 <td>有效</td>
 <td>机车头</td>
 </tr>
 <tr>
 <td>C00002</td>
 <td>车厢</td>
 <td>机车</td>
 <td>有效</td>
 <td>载客车厢</td>
 </tr>
 </tbody>
</table>

重点是JS的实现。复选框很小,不容易点到,所以点击每一行也可以选中该行,并用高亮一些CSS样式表示。点击复选框所在单元格也能选中复选框。

下面是完整代码和注释说明:

<!DOCTYPE html>
<html lang="zh-CN">

 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
 <title>表格</title>
 <meta name="keywords" content="表格">
 <meta name="description" content="这真的是一个表格" />
 <meta name="HandheldFriendly" content="True" />
 <link rel="shortcut icon" href="img/favicon.ico">
 <!-- Bootstrap3.3.5 CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">

 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>

 <body>
 <div class="panel-group">
 <div class="panel panel-primary">
 <div class="panel-heading">
  列表
 </div>
 <div class="panel-body">
  <div class="list-op" id="list_op">
  <button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  </button>
  <button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
  </button>
  <button type="button" class="btn btn-default btn-sm">
  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
  </button>
  </div>
 </div>
 <table class="table table-bordered table-hover">
  <thead>
  <tr class="success">
  <th>类别编号</th>
  <th>类别名称</th>
  <th>类别组</th>
  <th>状态</th>
  <th>说明</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>C00001</td>
  <td>机车</td>
  <td>机车</td>
  <td>有效</td>
  <td>机车头</td>
  </tr>
  <tr>
  <td>C00002</td>
  <td>车厢</td>
  <td>机车</td>
  <td>有效</td>
  <td>载客车厢</td>
  </tr>
  </tbody>
 </table>
 <div class="panel-footer">
  <nav>
  <ul class="pagination pagination-sm">
   <li class="disabled">
    <a href="#" aria-label="Previous">
    <span aria-hidden="true">«</span>
    </a>
   </li>
   <li class="active"><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li>
   <a href="#" aria-label="Next">
   <span aria-hidden="true">»</span>
   </a>
   </li>
  </ul>
  </nav>
 </div><!-- end of panel-footer -->
 </div><!-- end of panel -->
 </div>
 <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
 <script src="js/jquery-1.11.3.min.js "></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js "></script>
 <script>
 $(function(){
 function initTableCheckbox() {
 var $thr = $('table thead tr');
 var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
 /*将全选/反选复选框添加到表头最前,即增加一列*/
 $thr.prepend($checkAllTh);
 /*“全选/反选”复选框*/
 var $checkAll = $thr.find('input');
 $checkAll.click(function(event){
  /*将所有行的选中状态设成全选框的选中状态*/
  $tbr.find('input').prop('checked',$(this).prop('checked'));
  /*并调整所有选中行的CSS样式*/
  if ($(this).prop('checked')) {
  $tbr.find('input').parent().parent().addClass('warning');
  } else{
  $tbr.find('input').parent().parent().removeClass('warning');
  }
  /*阻止向上冒泡,以防再次触发点击操作*/
  event.stopPropagation();
 });
 /*点击全选框所在单元格时也触发全选框的点击操作*/
 $checkAllTh.click(function(){
  $(this).find('input').click();
 });
 var $tbr = $('table tbody tr');
 var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
 /*每一行都在最前面插入一个选中复选框的单元格*/
 $tbr.prepend($checkItemTd);
 /*点击每一行的选中复选框时*/
 $tbr.find('input').click(function(event){
  /*调整选中行的CSS样式*/
  $(this).parent().parent().toggleClass('warning');
  /*如果已经被选中行的行数等于表格的数据行数,将全选框设为选中状态,否则设为未选中状态*/
  $checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
  /*阻止向上冒泡,以防再次触发点击操作*/
  event.stopPropagation();
 });
 /*点击每一行时也触发该行的选中操作*/
 $tbr.click(function(){
  $(this).find('input').click();
 });
 }
 initTableCheckbox();
 });
 </script>
 </body>

</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言留言交流。

Javascript 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 #Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 #Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 #Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 #Javascript
详解jQuery的表单验证插件--Validation
Dec 21 #Javascript
JS无缝滚动效果实现方法分析
Dec 21 #Javascript
简单实现JS计算器功能
Dec 21 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP中SESSION过期设置
2021/03/09 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
angular6.0开发教程之如何安装angular6.0框架
2018/06/29 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python和opencv实现抠图
2018/07/18 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
法国在线药房:DoctiPharma
2020/10/21 全球购物
J2EE模式面试题
2016/10/11 面试题
电子商务应届生自我鉴定
2014/01/13 职场文书
交通事故私了协议书
2014/04/16 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
初级职称评定工作总结
2015/08/13 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
Redis实现分布式锁的五种方法详解
2022/06/14 Redis