layui表格实现代码


Posted in Javascript onMay 20, 2017

本文实例为大家分享了layui基本表格的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基本表格</title>
    <link rel="stylesheet" href="layui/css/layui.css">
  </head>
  <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
 <legend>默认表格</legend>
</fieldset>

<div class="layui-form">
 <table class="layui-table">
  <colgroup>
   <col width="50">
   <col width="150">
   <col width="150">
   <col width="200">
   <col>
  </colgroup>
  <thead>
   <tr>
    <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
    <th>人物</th>
    <th>民族</th>
    <th>出场时间</th>
    <th>格言</th>
   </tr> 
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" name="" lay-skin="primary"></td>
    <td>贤心</td>
    <td>汉族</td>
    <td>1989-10-14</td>
    <td>人生似修行</td>
   </tr>
   <tr>
    <td><input type="checkbox" name="" lay-skin="primary"></td>
    <td>张爱玲</td>
    <td>汉族</td>
    <td>1920-09-30</td>
    <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
   </tr>
   <tr>
    <td><input type="checkbox" name="" lay-skin="primary"></td>
    <td>Helen Keller</td>
    <td>拉丁美裔</td>
    <td>1880-06-27</td>
    <td> Life is either a daring adventure or nothing.</td>
   </tr>
   <tr>
    <td><input type="checkbox" name="" lay-skin="primary"></td>
    <td>岳飞</td>
    <td>汉族</td>
    <td>1103-北宋崇宁二年</td>
    <td>教科书再滥改,也抹不去“民族英雄”的事实</td>
   </tr>
   <tr>
    <td><input type="checkbox" name="" lay-skin="primary"></td>
    <td>孟子</td>
    <td>华夏族(汉族)</td>
    <td>公元前-372年</td>
    <td>猿强,则国强。国强,则猿更强! </td>
   </tr>
  </tbody>
 </table>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>行边框表格</legend>
</fieldset> 

<table class="layui-table" lay-skin="line">
 <colgroup>
  <col width="150">
  <col width="150">
  <col width="200">
  <col>
 </colgroup>
 <thead>
  <tr>
   <th>人物</th>
   <th>民族</th>
   <th>出场时间</th>
   <th>格言</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <td>贤心</td>
   <td>汉族</td>
   <td>1989-10-14</td>
   <td>人生似修行</td>
  </tr>
  <tr>
   <td>张爱玲</td>
   <td>汉族</td>
   <td>1920-09-30</td>
   <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
  </tr>
  <tr>
   <td>Helen Keller</td>
   <td>拉丁美裔</td>
   <td>1880-06-27</td>
   <td> Life is either a daring adventure or nothing.</td>
  </tr>
  <tr>
   <td>岳飞</td>
   <td>汉族</td>
   <td>1103-北宋崇宁二年</td>
   <td>教科书再滥改,也抹不去“民族英雄”的事实</td>
  </tr>
  <tr>
   <td>孟子</td>
   <td>华夏族(汉族)</td>
   <td>公元前-372年</td>
   <td>猿强,则国强。国强,则猿更强! </td>
  </tr>
 </tbody>
</table> 

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>列边框表格</legend>
</fieldset> 

<table class="layui-table" lay-even="" lay-skin="row">
 <colgroup>
  <col width="150">
  <col width="150">
  <col width="200">
  <col>
 </colgroup>
 <thead>
  <tr>
   <th>人物</th>
   <th>民族</th>
   <th>出场时间</th>
   <th>格言</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <td>贤心</td>
   <td>汉族</td>
   <td>1989-10-14</td>
   <td>人生似修行</td>
  </tr>
  <tr>
   <td>张爱玲</td>
   <td>汉族</td>
   <td>1920-09-30</td>
   <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
  </tr>
  <tr>
   <td>Helen Keller</td>
   <td>拉丁美裔</td>
   <td>1880-06-27</td>
   <td> Life is either a daring adventure or nothing.</td>
  </tr>
  <tr>
   <td>岳飞</td>
   <td>汉族</td>
   <td>1103-北宋崇宁二年</td>
   <td>教科书再滥改,也抹不去“民族英雄”的事实</td>
  </tr>
  <tr>
   <td>孟子</td>
   <td>华夏族(汉族)</td>
   <td>公元前-372年</td>
   <td>猿强,则国强。国强,则猿更强! </td>
  </tr>
 </tbody>
</table> 

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>无边框表格</legend>
</fieldset> 

<table class="layui-table" lay-even="" lay-skin="nob">
 <colgroup>
  <col width="150">
  <col width="150">
  <col width="200">
  <col>
 </colgroup>
 <thead>
  <tr>
   <th>人物</th>
   <th>民族</th>
   <th>出场时间</th>
   <th>格言</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <td>贤心</td>
   <td>汉族</td>
   <td>1989-10-14</td>
   <td>人生似修行</td>
  </tr>
  <tr>
   <td>张爱玲</td>
   <td>汉族</td>
   <td>1920-09-30</td>
   <td>于千万人之中遇见你所遇见的人,于千万年之中,时间的无涯的荒野里…</td>
  </tr>
  <tr>
   <td>Helen Keller</td>
   <td>拉丁美裔</td>
   <td>1880-06-27</td>
   <td> Life is either a daring adventure or nothing.</td>
  </tr>
  <tr>
   <td>岳飞</td>
   <td>汉族</td>
   <td>1103-北宋崇宁二年</td>
   <td>教科书再滥改,也抹不去“民族英雄”的事实</td>
  </tr>
  <tr>
   <td>孟子</td>
   <td>华夏族(汉族)</td>
   <td>公元前-372年</td>
   <td>猿强,则国强。国强,则猿更强! </td>
  </tr>
 </tbody>
</table>    

<script src="layui/layui.js" charset="utf-8"></script>
<script>
layui.use('form', function(){
 var $ = layui.jquery, form = layui.form();

 //全选
 form.on('checkbox(allChoose)', function(data){
  var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
  child.each(function(index, item){
   item.checked = data.elem.checked;
  });
  form.render('checkbox');
 });

});
</script>
  </body>
</html>

layui表格实现代码

官网表格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自定义事件代码说明
Jan 31 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
Node.js实现文件上传
Jul 05 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 #Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 #jQuery
深入理解Angularjs中$http.post与$.post
May 19 #Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 #jQuery
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 #Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 #Javascript
微信小程序表单验证错误提示效果
May 19 #Javascript
You might like
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Python 列表理解及使用方法
2017/10/27 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python绘制组合图的示例
2020/09/18 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
暑期实习鉴定
2013/12/16 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
集结号观后感
2015/06/08 职场文书
2016七夕情人节感言
2015/12/09 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android