当前位置：Gxlcms > JavaScript > layui表格实例分享

layui表格实例分享

时间：2021-07-01 10:21:17 帮助过：27人阅读

本文主要为大家详细介绍了layui表格效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本表格</title>
  6.     <link rel="stylesheet" href="layui/css/layui.css">
  7.   </head>
  8.   <body>
  9. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  10.  <legend>默认表格</legend>
  11. </fieldset>
  12. <p class="layui-form">
  13.  <table class="layui-table">
  14.   <colgroup>
  15.    <col width="50">
  16.    <col width="150">
  17.    <col width="150">
  18.    <col width="200">
  19.    <col>
  20.   </colgroup>
  21.   <thead>
  22.    <tr>
  23.     <th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
  24.     <th>人物</th>
  25.     <th>民族</th>
  26.     <th>出场时间</th>
  27.     <th>格言</th>
  28.    </tr> 
  29.   </thead>
  30.   <tbody>
  31.    <tr>
  32.     <td><input type="checkbox" name="" lay-skin="primary"></td>
  33.     <td>贤心</td>
  34.     <td>汉族</td>
  35.     <td>1989-10-14</td>
  36.     <td>人生似修行</td>
  37.    </tr>
  38.    <tr>
  39.     <td><input type="checkbox" name="" lay-skin="primary"></td>
  40.     <td>张爱玲</td>
  41.     <td>汉族</td>
  42.     <td>1920-09-30</td>
  43.     <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  44.    </tr>
  45.    <tr>
  46.     <td><input type="checkbox" name="" lay-skin="primary"></td>
  47.     <td>Helen Keller</td>
  48.     <td>拉丁美裔</td>
  49.     <td>1880-06-27</td>
  50.     <td> Life is either a daring adventure or nothing.</td>
  51.    </tr>
  52.    <tr>
  53.     <td><input type="checkbox" name="" lay-skin="primary"></td>
  54.     <td>岳飞</td>
  55.     <td>汉族</td>
  56.     <td>1103-北宋崇宁二年</td>
  57.     <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
  58.    </tr>
  59.    <tr>
  60.     <td><input type="checkbox" name="" lay-skin="primary"></td>
  61.     <td>孟子</td>
  62.     <td>华夏族（汉族）</td>
  63.     <td>公元前-372年</td>
  64.     <td>猿强，则国强。国强，则猿更强！ </td>
  65.    </tr>
  66.   </tbody>
  67.  </table>
  68. </p>
  69. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  70.  <legend>行边框表格</legend>
  71. </fieldset> 
  72. <table class="layui-table" lay-skin="line">
  73.  <colgroup>
  74.   <col width="150">
  75.   <col width="150">
  76.   <col width="200">
  77.   <col>
  78.  </colgroup>
  79.  <thead>
  80.   <tr>
  81.    <th>人物</th>
  82.    <th>民族</th>
  83.    <th>出场时间</th>
  84.    <th>格言</th>
  85.   </tr> 
  86.  </thead>
  87.  <tbody>
  88.   <tr>
  89.    <td>贤心</td>
  90.    <td>汉族</td>
  91.    <td>1989-10-14</td>
  92.    <td>人生似修行</td>
  93.   </tr>
  94.   <tr>
  95.    <td>张爱玲</td>
  96.    <td>汉族</td>
  97.    <td>1920-09-30</td>
  98.    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  99.   </tr>
  100.   <tr>
  101.    <td>Helen Keller</td>
  102.    <td>拉丁美裔</td>
  103.    <td>1880-06-27</td>
  104.    <td> Life is either a daring adventure or nothing.</td>
  105.   </tr>
  106.   <tr>
  107.    <td>岳飞</td>
  108.    <td>汉族</td>
  109.    <td>1103-北宋崇宁二年</td>
  110.    <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
  111.   </tr>
  112.   <tr>
  113.    <td>孟子</td>
  114.    <td>华夏族（汉族）</td>
  115.    <td>公元前-372年</td>
  116.    <td>猿强，则国强。国强，则猿更强！ </td>
  117.   </tr>
  118.  </tbody>
  119. </table> 
  120. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  121.  <legend>列边框表格</legend>
  122. </fieldset> 
  123. <table class="layui-table" lay-even="" lay-skin="row">
  124.  <colgroup>
  125.   <col width="150">
  126.   <col width="150">
  127.   <col width="200">
  128.   <col>
  129.  </colgroup>
  130.  <thead>
  131.   <tr>
  132.    <th>人物</th>
  133.    <th>民族</th>
  134.    <th>出场时间</th>
  135.    <th>格言</th>
  136.   </tr> 
  137.  </thead>
  138.  <tbody>
  139.   <tr>
  140.    <td>贤心</td>
  141.    <td>汉族</td>
  142.    <td>1989-10-14</td>
  143.    <td>人生似修行</td>
  144.   </tr>
  145.   <tr>
  146.    <td>张爱玲</td>
  147.    <td>汉族</td>
  148.    <td>1920-09-30</td>
  149.    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  150.   </tr>
  151.   <tr>
  152.    <td>Helen Keller</td>
  153.    <td>拉丁美裔</td>
  154.    <td>1880-06-27</td>
  155.    <td> Life is either a daring adventure or nothing.</td>
  156.   </tr>
  157.   <tr>
  158.    <td>岳飞</td>
  159.    <td>汉族</td>
  160.    <td>1103-北宋崇宁二年</td>
  161.    <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
  162.   </tr>
  163.   <tr>
  164.    <td>孟子</td>
  165.    <td>华夏族（汉族）</td>
  166.    <td>公元前-372年</td>
  167.    <td>猿强，则国强。国强，则猿更强！ </td>
  168.   </tr>
  169.  </tbody>
  170. </table> 
  171. <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  172.  <legend>无边框表格</legend>
  173. </fieldset> 
  174. <table class="layui-table" lay-even="" lay-skin="nob">
  175.  <colgroup>
  176.   <col width="150">
  177.   <col width="150">
  178.   <col width="200">
  179.   <col>
  180.  </colgroup>
  181.  <thead>
  182.   <tr>
  183.    <th>人物</th>
  184.    <th>民族</th>
  185.    <th>出场时间</th>
  186.    <th>格言</th>
  187.   </tr> 
  188.  </thead>
  189.  <tbody>
  190.   <tr>
  191.    <td>贤心</td>
  192.    <td>汉族</td>
  193.    <td>1989-10-14</td>
  194.    <td>人生似修行</td>
  195.   </tr>
  196.   <tr>
  197.    <td>张爱玲</td>
  198.    <td>汉族</td>
  199.    <td>1920-09-30</td>
  200.    <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
  201.   </tr>
  202.   <tr>
  203.    <td>Helen Keller</td>
  204.    <td>拉丁美裔</td>
  205.    <td>1880-06-27</td>
  206.    <td> Life is either a daring adventure or nothing.</td>
  207.   </tr>
  208.   <tr>
  209.    <td>岳飞</td>
  210.    <td>汉族</td>
  211.    <td>1103-北宋崇宁二年</td>
  212.    <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
  213.   </tr>
  214.   <tr>
  215.    <td>孟子</td>
  216.    <td>华夏族（汉族）</td>
  217.    <td>公元前-372年</td>
  218.    <td>猿强，则国强。国强，则猿更强！ </td>
  219.   </tr>
  220.  </tbody>
  221. </table>    
  222. <script src="layui/layui.js" charset="utf-8"></script>
  223. <script>
  224. layui.use('form', function(){
  225.  var $ = layui.jquery, form = layui.form();
  226.  //全选
  227.  form.on('checkbox(allChoose)', function(data){
  228.   var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
  229.   child.each(function(index, item){
  230.    item.checked = data.elem.checked;
  231.   });
  232.   form.render('checkbox');
  233.  });
  234. });
  235. </script>
  236.   </body>
  237. </html>

相关推荐：

layui实现选项卡效果代码分享

jQuerylayui常用方法实例分享

layui分页效果实现代码分享

以上就是layui表格实例分享的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！