layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行

更新時(shí)間：2018年08月10日 08:46:34 作者：sj0613xz

想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能，但發(fā)現(xiàn)layui并未集成該工具欄，因此，需要自己手動添加這個(gè)功能；這篇文章主要介紹了layui點(diǎn)擊按鈕給table添加一行,需要的朋友可以參考下

•問題描述：想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能，但發(fā)現(xiàn)layuii并未集成該工具欄，因此，需要自己手動添加這個(gè)功能；

•原先我寫的table是這樣實(shí)現(xiàn)的：

$("#addTable").click(function(){
     var tr=" <tr>"+
       " <td>11</td>"+
       " <td>22</td>"+
       " <td>33</td>"+
       " <td>44</td>"+
       " <td>55</td>"+
       " </tr>";         
   $(".layui-table").append(tr);
  });

并不能實(shí)現(xiàn)添加的效果；后查詢后發(fā)現(xiàn)，這樣做是基于table是用靜態(tài)的方式編寫的，即：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'tableInfo'}" lay-filter="test">
   <thead>
    <tr>
     <th lay-data="{field:'id', width:80, sort: true}">ID</th>
     <th lay-data="{field:'username', width:80}">用戶名</th>
     <th lay-data="{field:'sex', width:80, sort: true}">性別</th>
     <th lay-data="{field:'city'}">城市</th>
     <th lay-data="{field:'sign'}">簽名</th>
     <th lay-data="{field:'experience', sort: true}">積分</th>
     <th lay-data="{field:'score', sort: true}">評分</th>
     <th lay-data="{field:'classify'}">職業(yè)</th>
     <th lay-data="{field:'wealth', sort: true}">財(cái)富</th>
    </tr>
   </thead>
  </table>

而我用的是這樣的方式：<table class="layui-hide" id="baseInfo" lay-filter="demo" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30}"></table>

關(guān)于列名的定義是寫在table.render({}）方法中的

•解決方案：將table改寫成靜態(tài)的方式即可，即第二部分代碼
•此時(shí)出現(xiàn)新問題：每點(diǎn)擊一次會出現(xiàn)兩條數(shù)據(jù)，應(yīng)做如下修改：$(".layui-table-body .layui-table").append(tr);

最后即可實(shí)現(xiàn)點(diǎn)擊按鈕新增一條數(shù)據(jù)的效果。

總結(jié)

以上所述是小編給大家介紹的layui點(diǎn)擊按鈕給table添加一行，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

layui
table

相關(guān)文章

利用JavaScript實(shí)現(xiàn)繪制2023新年煙花的示例代碼
大家過年好！新春佳節(jié)，在這個(gè)充滿喜悅的日子里，愿新年的鐘聲帶給你一份希望和期待。在這喜慶的日子里，小編和大家分享一個(gè)煙花代碼，希望大家能夠喜歡
2023-01-01
JS實(shí)現(xiàn)轉(zhuǎn)動隨機(jī)數(shù)抽獎特效代碼
這篇文章主要為大家詳細(xì)介紹了一款轉(zhuǎn)動隨機(jī)數(shù)抽獎的JS特效代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
div+css布局的圖片連續(xù)滾動js實(shí)現(xiàn)代碼
整理一個(gè)div+css圖片連續(xù)滾動代碼，原理跟腳本之家之前發(fā)布的文章一樣。
2010-05-05
微信小程序?qū)崿F(xiàn)多張照片上傳功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多張照片上傳功能,當(dāng)服務(wù)器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
js substring從右邊獲取指定長度字符串(示例代碼)
本篇文章主要是對js substring從右邊獲取指定長度字符串的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
多個(gè)表單中如何獲得這個(gè)文件上傳的網(wǎng)址實(shí)現(xiàn)js代碼
假設(shè)一個(gè)網(wǎng)頁里有多個(gè)表單，其中一個(gè)表單里有文件上傳，問題是如何獲得這個(gè)文件上傳的網(wǎng)址呢，接下來為大家介紹下實(shí)現(xiàn)的js代碼，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-03-03
從數(shù)組中隨機(jī)取x條不重復(fù)數(shù)據(jù)的JS代碼
這篇文章主要介紹了從數(shù)組中隨機(jī)取x條不重復(fù)數(shù)據(jù)的JS代碼，有需要的朋友可以參考一下
2013-12-12
不同Jquery版本引發(fā)的問題解決
用JS實(shí)現(xiàn)了一個(gè)拖拽排序，可因Jquery版本不同導(dǎo)致瀏覽器訪問時(shí)存在很多的問題，下面為大家介紹下具體的解決方法，感興趣的朋友可以參考下
2013-10-10
JavaScript仿支付寶6位數(shù)字密碼輸入框
最近做了一個(gè)項(xiàng)目，涉及到某寶購物支付密碼的輸入框功能，下面小編把實(shí)現(xiàn)思路分享到腳本之家平臺供大家參考
2016-12-12
使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例（前端組件化）
這篇文章主要介紹了使用JSX 建立 Markup 組件風(fēng)格開發(fā)的示例（前端組件化）本文重點(diǎn)講解如何從0搭建一個(gè)組件系統(tǒng)，在這里我們會學(xué)習(xí)使用JSX來建立markup 的風(fēng)格，我們基于與React 一樣的 JSX 去建立我們組件的風(fēng)格
2021-04-04