欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

layui表格實(shí)現(xiàn)代碼

 更新時(shí)間：2017年05月20日 08:47:37   作者：廣信_(tái)劉東君  
這篇文章主要為大家詳細(xì)介紹了layui表格效果的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了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>默認(rèn)表格</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>出場(chǎng)時(shí)間</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>張愛(ài)玲</td>
    <td>漢族</td>
    <td>1920-09-30</td>
    <td>于千萬(wàn)人之中遇見(jiàn)你所遇見(jiàn)的人，于千萬(wàn)年之中，時(shí)間的無(wú)涯的荒野里…</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>教科書(shū)再濫改，也抹不去“民族英雄”的事實(shí)</td>
   </tr>
   <tr>
    <td><input type="checkbox" name="" lay-skin="primary"></td>
    <td>孟子</td>
    <td>華夏族（漢族）</td>
    <td>公元前-372年</td>
    <td>猿強(qiáng)，則國(guó)強(qiáng)。國(guó)強(qiáng)，則猿更強(qiáng)！ </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>出場(chǎng)時(shí)間</th>
   <th>格言</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <td>賢心</td>
   <td>漢族</td>
   <td>1989-10-14</td>
   <td>人生似修行</td>
  </tr>
  <tr>
   <td>張愛(ài)玲</td>
   <td>漢族</td>
   <td>1920-09-30</td>
   <td>于千萬(wàn)人之中遇見(jiàn)你所遇見(jiàn)的人，于千萬(wàn)年之中，時(shí)間的無(wú)涯的荒野里…</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>教科書(shū)再濫改，也抹不去“民族英雄”的事實(shí)</td>
  </tr>
  <tr>
   <td>孟子</td>
   <td>華夏族（漢族）</td>
   <td>公元前-372年</td>
   <td>猿強(qiáng)，則國(guó)強(qiáng)。國(guó)強(qiáng)，則猿更強(qiáng)！ </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>出場(chǎng)時(shí)間</th>
   <th>格言</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <td>賢心</td>
   <td>漢族</td>
   <td>1989-10-14</td>
   <td>人生似修行</td>
  </tr>
  <tr>
   <td>張愛(ài)玲</td>
   <td>漢族</td>
   <td>1920-09-30</td>
   <td>于千萬(wàn)人之中遇見(jiàn)你所遇見(jiàn)的人，于千萬(wàn)年之中，時(shí)間的無(wú)涯的荒野里…</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>教科書(shū)再濫改，也抹不去“民族英雄”的事實(shí)</td>
  </tr>
  <tr>
   <td>孟子</td>
   <td>華夏族（漢族）</td>
   <td>公元前-372年</td>
   <td>猿強(qiáng)，則國(guó)強(qiáng)。國(guó)強(qiáng)，則猿更強(qiáng)！ </td>
  </tr>
 </tbody>
</table> 

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
 <legend>無(wú)邊框表格</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>出場(chǎng)時(shí)間</th>
   <th>格言</th>
  </tr> 
 </thead>
 <tbody>
  <tr>
   <td>賢心</td>
   <td>漢族</td>
   <td>1989-10-14</td>
   <td>人生似修行</td>
  </tr>
  <tr>
   <td>張愛(ài)玲</td>
   <td>漢族</td>
   <td>1920-09-30</td>
   <td>于千萬(wàn)人之中遇見(jiàn)你所遇見(jiàn)的人，于千萬(wàn)年之中，時(shí)間的無(wú)涯的荒野里…</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>教科書(shū)再濫改，也抹不去“民族英雄”的事實(shí)</td>
  </tr>
  <tr>
   <td>孟子</td>
   <td>華夏族（漢族）</td>
   <td>公元前-372年</td>
   <td>猿強(qiáng)，則國(guó)強(qiáng)。國(guó)強(qiáng)，則猿更強(qiáng)！ </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)表格

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • Jquery 實(shí)現(xiàn)彈出層插件

    Jquery 實(shí)現(xiàn)彈出層插件

    這篇文章主要介紹了Jquery 實(shí)現(xiàn)彈出層插件,包括遮罩層、插件參數(shù)、關(guān)閉動(dòng)作、拖拽效果等，需要的朋友可以參考下
    2015-01-01
  • jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼

    jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼

    這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-10-10
  • jQuery validate(submitHandler函數(shù))驗(yàn)證通過(guò)發(fā)送Ajax(實(shí)例詳解)

    jQuery validate(submitHandler函數(shù))驗(yàn)證通過(guò)發(fā)送Ajax(實(shí)例詳解)

    這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗(yàn)證通過(guò)發(fā)送Ajax，可以用validate框架驗(yàn)證元素，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2022-10-10
  • jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法

    jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法

    這篇文章主要介紹了jQuery插件jqGrid動(dòng)態(tài)獲取列和列字段的方法,結(jié)合實(shí)例形式分析了表格插件jqGrid針對(duì)表格字段屬性相關(guān)操作技巧,需要的朋友可以參考下
    2017-03-03
  • toggle一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框

    toggle一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框

    本文為大家介紹下如何讓一個(gè)div顯示或隱藏且可擴(kuò)展成自定義下拉框，具體實(shí)現(xiàn)如下，感興趣的朋友可參考下，希望對(duì)大家有所幫助
    2013-09-09
  • jquery實(shí)現(xiàn)的Banner廣告收縮效果代碼

    jquery實(shí)現(xiàn)的Banner廣告收縮效果代碼

    這篇文章主要介紹了jquery實(shí)現(xiàn)的Banner廣告收縮效果代碼,可實(shí)現(xiàn)點(diǎn)擊按鈕收縮與展開(kāi)廣告圖片的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
    2015-09-09
  • JQuery入門(mén)——事件切換之toggle()方法應(yīng)用介紹

    JQuery入門(mén)——事件切換之toggle()方法應(yīng)用介紹

    在toggle()方法中，可以依次調(diào)用N個(gè)指定的函數(shù)，直到最后一個(gè)函數(shù)，然后重復(fù)對(duì)這個(gè)函數(shù)輪番調(diào)用,在函數(shù)之間切換調(diào)用的時(shí)候相當(dāng)?shù)姆奖?接下來(lái)將會(huì)詳細(xì)介紹toggle()方法的使用，感興趣的你可不要錯(cuò)過(guò)了啊
    2013-02-02
  • jquery ajax 局部刷新小案例

    jquery ajax 局部刷新小案例

    這篇文章主要是對(duì)jquery ajax 局部刷新的小案例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-02-02
  • jQuery中noConflict()用法實(shí)例分析

    jQuery中noConflict()用法實(shí)例分析

    這篇文章主要介紹了jQuery中noConflict()用法,實(shí)例分析了noConflict()的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下
    2015-02-02
  • 使用jQuery實(shí)現(xiàn)一個(gè)類(lèi)似GridView的編輯,更新,取消和刪除的功能

    使用jQuery實(shí)現(xiàn)一個(gè)類(lèi)似GridView的編輯,更新,取消和刪除的功能

    在項(xiàng)目中遇到這樣的需求當(dāng)用戶(hù)點(diǎn)擊編輯時(shí)，在點(diǎn)擊行下動(dòng)態(tài)產(chǎn)生一行，編輯銨鈕變?yōu)閐isabled,新產(chǎn)生的一行有更新和取消的銨鈕，點(diǎn)擊“取消”銨鈕，刪除剛剛動(dòng)態(tài)產(chǎn)生的行，編輯銨鈕狀態(tài)恢復(fù)。下面小編給大家分享實(shí)例代碼，一起看看吧
    2017-03-03

最新評(píng)論