layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行
•問題描述:想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能,但發(fā)現(xiàn)layuii并未集成該工具欄,因此,需要自己手動添加這個功能;
•原先我寫的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}">財富</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)的方式即可,即第二部分代碼
•此時出現(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添加一行,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
這篇文章主要介紹了javascript監(jiān)聽鼠標(biāo)滾輪事件淺析,使用具體例子說明,同時考慮了不同的瀏覽器,需要的朋友可以參考下2014-06-06Leaflet?數(shù)據(jù)可視化實(shí)現(xiàn)地圖下鉆示例詳解
這篇文章主要為大家介紹了Leaflet數(shù)據(jù)可視化實(shí)現(xiàn)地圖下鉆示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01JS前端攻堅Eventbus實(shí)現(xiàn)更新示例詳解
這篇文章主要為大家介紹了JS前端攻堅Eventbus實(shí)現(xiàn)更新示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Javascript 正則表達(dá)式校驗(yàn)數(shù)字的簡單實(shí)例
下面小編就為大家?guī)硪黄狫avascript 正則表達(dá)式校驗(yàn)數(shù)字的簡單實(shí)例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11使用bootstrap插件實(shí)現(xiàn)模態(tài)框效果
今天我們選擇使用著名的 bootstrap 庫的模態(tài)框插件 modal.js 來實(shí)現(xiàn)模態(tài)框效果,同時也使大家進(jìn)一步熟悉 bootstrap 的插件使用,需要的朋友可以參考下2017-05-05ng-options和ng-checked在表單中的高級運(yùn)用(推薦)
AngularJS是當(dāng)前非常的流行的前端框架,它的語法糖非常多,也極大的方便了前端開發(fā)者。這篇文章主要介紹了ng-options和ng-checked在表單中的高級運(yùn)用,需要的朋友可以參考下2017-01-01