首页
所有分类
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 相关文章推荐
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
vue实现图片上传到后台
Jun 29 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) name_scope (1) Keras(3) 神经网络(7) 绘图(1) 三子棋(2) blinker(1) variable_scope(1) turtle(1) 信号库(1)
You might like
删除数组元素实用的PHP数组函数
2008/08/18 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
详解webpack引用jquery（第三方模块）的三种办法
2019/08/21 jQuery
微信小程序自定义纯净模态框（弹出框）的实例代码
2020/03/09 Javascript
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python中方法链的使用方法
2016/02/23 Python
Apache部署Django项目图文详解
2019/07/30 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
南京软件公司的.net程序员笔试题
2014/08/31 面试题
宿舍打麻将检讨书
2014/01/24 职场文书
美容院经理岗位职责
2014/04/03 职场文书
2014年英语教学工作总结
2014/12/17 职场文书