首页
所有分类
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 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
深入理解JavaScript系列（47）：对象创建模式（上篇）
Mar 04 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
vue项目中js-cookie的使用存储token操作
Nov 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
腾讯云(1) Vite(1) dict(1) 云服务器(1) JDK(1) expdp(1) 外键约束(1) 数据备份(2) Foreign Key(1) hook(1)
You might like
php操作xml
2013/10/27 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
php和asp语法上的区别总结
2019/05/12 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
JavaScript折半查找（二分查找）算法原理与实现方法示例
2018/08/06 Javascript
element ui table（表格）实现点击一行展开功能
2018/12/04 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
如何在python中实现线性回归
2020/08/10 Python
小学国旗下的演讲稿
2014/08/28 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
2015年老干部工作总结
2015/04/23 职场文书
大学生村官入党自传
2015/06/26 职场文书
篮球赛新闻稿
2015/07/17 职场文书
学雷锋感言
2015/08/03 职场文书
英语教学课后反思
2016/02/15 职场文书