suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen von Laui-Tabellenbeispielen

Teilen von Laui-Tabellenbeispielen

小云云
小云云Original
2018-05-11 14:36:083314Durchsuche

Dieser Artikel stellt hauptsächlich den Implementierungscode des Laui-Tischeffekts im Detail vor. Er hat einen gewissen Referenzwert. Ich hoffe, er kann jedem helfen. 

<!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>

<p 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>
</p>

<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(&#39;form&#39;, function(){
 var $ = layui.jquery, form = layui.form();

 //全选
 form.on(&#39;checkbox(allChoose)&#39;, function(data){
  var child = $(data.elem).parents(&#39;table&#39;).find(&#39;tbody input[type="checkbox"]&#39;);
  child.each(function(index, item){
   item.checked = data.elem.checked;
  });
  form.render(&#39;checkbox&#39;);
 });

});
</script>
  </body>
</html>

Verwandte Empfehlungen:

Layui-Implementierung der Tab-Effekt-Codefreigabe

Beispiele für gängige Methoden von jQuerylayui teilen

Code für die Implementierung des Laui-Paging-Effekts teilen

Das obige ist der detaillierte Inhalt vonTeilen von Laui-Tabellenbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

layui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Layui implementiert die Codefreigabe mit Tab-EffektenNächster Artikel：Layui implementiert die Codefreigabe mit Tab-Effekten

In Verbindung stehende Artikel

Mehr sehen