<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本表格</title> <link href="https://www.jb51.net/layui/css/layui.css"> </head> <body> <fieldset> <legend>默认表格</legend> </fieldset> <div> <table> <colgroup> <col> <col> <col> <col> <col> </colgroup> <thead> <tr> <th><input type="checkbox" lay-skin="primary" lay-filter="allChoose"></th> <th>人物</th> <th>民族</th> <th>出场时间</th> <th>格言</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" lay-skin="primary"></td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> </tr> <tr> <td><input type="checkbox" lay-skin="primary"></td> <td>张爱玲</td> <td>汉族</td> <td>1920-09-30</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> <tr> <td><input type="checkbox" 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" lay-skin="primary"></td> <td>岳飞</td> <td>汉族</td> <td>1103-北宋崇宁二年</td> <td>教科书再滥改，也抹不去“民族英雄”的事实</td> </tr> <tr> <td><input type="checkbox" lay-skin="primary"></td> <td>孟子</td> <td>华夏族（汉族）</td> <td>公元前-372年</td> <td>猿强，则国强。国强，则猿更强！ </td> </tr> </tbody> </table> </div> <fieldset> <legend>行边框表格</legend> </fieldset> <table lay-skin="line"> <colgroup> <col> <col> <col> <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> <legend>列边框表格</legend> </fieldset> <table lay-even="" lay-skin="row"> <colgroup> <col> <col> <col> <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> <legend>无边框表格</legend> </fieldset> <table lay-even="" lay-skin="nob"> <colgroup> <col> <col> <col> <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="https://www.jb51.net/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>
