layui表格實現(xiàn)代碼
更新時間：2017年05月20日 08:47:37 作者：廣信_劉東君
這篇文章主要為大家詳細介紹了layui表格效果的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了layui基本表格的具體代碼，供大家參考，具體內(nèi)容如下
<!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>
官網(wǎng)表格
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Jquery 實現(xiàn)彈出層插件,包括遮罩層、插件參數(shù)、關(guān)閉動作、拖拽效果等，需要的朋友可以參考下2015-01-01
jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實例代碼
這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
jQuery validate(submitHandler函數(shù))驗證通過發(fā)送Ajax(實例詳解)
這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗證通過發(fā)送Ajax，可以用validate框架驗證元素，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-10-10
jQuery插件jqGrid動態(tài)獲取列和列字段的方法
這篇文章主要介紹了jQuery插件jqGrid動態(tài)獲取列和列字段的方法,結(jié)合實例形式分析了表格插件jqGrid針對表格字段屬性相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
本文為大家介紹下如何讓一個div顯示或隱藏且可擴展成自定義下拉框，具體實現(xiàn)如下，感興趣的朋友可參考下，希望對大家有所幫助2013-09-09
這篇文章主要介紹了jquery實現(xiàn)的Banner廣告收縮效果代碼,可實現(xiàn)點擊按鈕收縮與展開廣告圖片的功能,非常簡單實用,需要的朋友可以參考下2015-09-09
JQuery入門——事件切換之toggle()方法應(yīng)用介紹
在toggle()方法中，可以依次調(diào)用N個指定的函數(shù)，直到最后一個函數(shù)，然后重復(fù)對這個函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時候相當(dāng)?shù)姆奖?接下來將會詳細介紹toggle()方法的使用，感興趣的你可不要錯過了啊2013-02-02
這篇文章主要是對jquery ajax 局部刷新的小案例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了jQuery中noConflict()用法,實例分析了noConflict()的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
使用jQuery實現(xiàn)一個類似GridView的編輯,更新,取消和刪除的功能
在項目中遇到這樣的需求當(dāng)用戶點擊編輯時，在點擊行下動態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點擊“取消”銨鈕，刪除剛剛動態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實例代碼，一起看看吧2017-03-03