利用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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
JavaScript中的继承之类继承
May 01 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
详解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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP内核探索:变量概述
2014/01/30 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
js简易版购物车功能
2017/06/17 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Sanic框架应用部署方法详解
2018/07/18 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
大学生简单自荐信
2013/11/10 职场文书
小学教师岗位职责
2013/11/25 职场文书
八项规定整改措施
2014/02/12 职场文书
网络编辑岗位职责
2014/03/18 职场文书
大气污染防治方案
2014/05/19 职场文书
校园文化标语
2014/06/18 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
教师业务学习材料
2014/12/16 职场文书
高中教师个人工作总结
2015/02/10 职场文书
总结Python变量的相关知识
2021/06/28 Python