首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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表格实现代码

官网表格

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

layui表格实现代码

- Author -

广信_刘东君

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于恒等于（===）和非恒等于（!==）
Aug 20 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
YB217(1) 森海(1) 台湾(1) 南麂列岛(1) YB400(2) 直流胆(1) 1 Tube Radio(1) S2000(3) YB235(1) MX500(1)
You might like
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
简单实现js鼠标跟随效果
2020/08/02 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python实现两张图片的像素融合
2019/02/23 Python
python gdal安装与简单使用
2019/08/01 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python实发邮件实例详解
2019/11/11 Python
美国诺德斯特龙百货官网：Nordstrom
2016/08/23 全球购物
当一个对象被当作参数传递到一个方法后，此方法可改变这个对象的属性，并可返回变化后的结果，那么这里到底是值传递还是引用传递?
2014/09/09 面试题
十岁生日家长答谢词
2014/01/17 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
辞职信的写法
2015/02/27 职场文书
总经理司机岗位职责
2015/04/10 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python