本文實例為大家分享了layui基本表格的具體代碼,供大家參考,具體內容如下
創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今,先為周至等服務建站,周至等地企業(yè),進行企業(yè)商務咨詢服務。為周至企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
<!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" > <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" > <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" > <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" > <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>
官網(wǎng)表格
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
當前名稱:layui表格實現(xiàn)代碼
網(wǎng)頁網(wǎng)址:http://chinadenli.net/article12/iphpdc.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供電子商務、定制網(wǎng)站、網(wǎng)頁設計公司、做網(wǎng)站、移動網(wǎng)站建設、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)