bootstrap table實(shí)現(xiàn)雙擊可編輯、添加、刪除行功能
本文實(shí)例為大家分享了bootstrap table雙擊可編輯的具體代碼,供大家參考,具體內(nèi)容如下
html:
<table class="table table-bordered" id="para_table"> <tr> <th style="text-align:center" width="200">名稱</th> <th style="text-align:center" width="200">值</th> <th style="text-align:center" width="100">操作</th> </tr> <tr> <td style="text-align:center; " onclick="tdclick(this)"></td> <td style="text-align:center; " onclick="tdclick(this)"></td> <td style="text-align:center; " onclick="deletetr(this)"> <button type="button" class="btn btn-xs btn-link">刪除</button> </td> </tr> </table> <div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;"> <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button> </div>
js:
function save_para_table(){ var tableinfo = gettableinfo(); alert(tableinfo); } //get table infomation function gettableinfo(){ var key = ""; var value = ""; var tabledata = ""; var table = $("#para_table"); var tbody = table.children(); var trs = tbody.children(); for(var i=1;i<trs.length;i++){ var tds = trs.eq(i).children(); for(var j=0;j<tds.length;j++){ if(j==0){ if(tds.eq(j).text()==null||tds.eq(j).text()==""){ return null; } key = "key\":\""+tds.eq(j).text(); } if(j==1){ if(tds.eq(j).text()==null||tds.eq(j).text()==""){ return null; } value = "value\":\""+tds.eq(j).text(); } } if(i==trs.length-1){ tabledata += "{\""+key+"\",\""+value+"\"}"; }else{ tabledata += "{\""+key+"\",\""+value+"\"},"; } } tabledata = "["+tabledata+"]"; return tabledata; } function tdclick(tdobject){ var td=$(tdobject); td.attr("onclick", ""); //1,取出當(dāng)前td中的文本內(nèi)容保存起來 var text=td.text(); //2,清空td里面的內(nèi)容 td.html(""); //也可以用td.empty(); //3,建立一個(gè)文本框,也就是input的元素節(jié)點(diǎn) var input=$("<input>"); //4,設(shè)置文本框的值是保存起來的文本內(nèi)容 input.attr("value",text); input.bind("blur",function(){ var inputnode=$(this); var inputtext=inputnode.val(); var tdNode=inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); td.attr("onclick", "tdclick(this)"); }); input.keyup(function(event){ var myEvent =event||window.event; var kcode=myEvent.keyCode; if(kcode==13){ var inputnode=$(this); var inputtext=inputnode.val(); var tdNode=inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); } }); //5,將文本框加入到td中 td.append(input); var t =input.val(); input.val("").focus().val(t); // input.focus(); //6,清除點(diǎn)擊事件 td.unbind("click"); } function addtr(){ var table = $("#para_table"); var tr= $("<tr>" + "<td onclick='tdclick(this)'>"+"</td>" + "<td onclick='tdclick(this)'>"+"</td>" + "<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link' >"+"刪除"+"</button></td></tr>"); table.append(tr); } function deletetr(tdobject){ var td=$(tdobject); td.parents("tr").remove(); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- Bootstrap Table使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- bootstrap table 服務(wù)器端分頁例子分享
- Bootstrap Table的使用總結(jié)
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- 第一次動(dòng)手實(shí)現(xiàn)bootstrap table分頁效果
- BootStrap 可編輯表Table格
- Bootstrap嵌入jqGrid,使你的table牛逼起來
- BootStrap的table表頭固定tbody滾動(dòng)的實(shí)例代碼
相關(guān)文章
利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼
這篇文章主要介紹了利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼,本文通過實(shí)例代碼給大家介紹的非常想詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12圖片輪換效果實(shí)現(xiàn)代碼(點(diǎn)擊按鈕停止執(zhí)行)
在這個(gè)實(shí)例中需要注意的是,要把images文件夾下圖片的命名設(shè)置為有順序的,1、2、3..才可以,感興趣的朋友可以參考下2013-04-04JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空
表單驗(yàn)證幾乎在每個(gè)需要注冊(cè)或者是登錄的網(wǎng)站都是必不可少,下面通過本篇文章給大家介紹JavaScript表單驗(yàn)證實(shí)例之驗(yàn)證表單項(xiàng)是否為空,涉及到j(luò)s表單驗(yàn)證實(shí)例相關(guān)知識(shí),對(duì)js表單驗(yàn)證實(shí)例代碼需要的朋友一起學(xué)習(xí)吧2016-01-01uniapp實(shí)現(xiàn)日期時(shí)間選擇器
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)日期時(shí)間選擇器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集
這篇文章主要介紹了JS實(shí)現(xiàn)的仿東京商城菜單、仿Win右鍵菜單及仿淘寶TAB特效合集,以實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加下拉菜單及響應(yīng)鼠標(biāo)事件生成菜單等實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-09-09JavaScript ECMA-262-3 深入解析(一):執(zhí)行上下文實(shí)例分析
這篇文章主要介紹了JavaScript ECMA-262-3 執(zhí)行上下文,結(jié)合實(shí)例形式詳細(xì)分析JavaScript ECMA執(zhí)行上下文相關(guān)概念、原理與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04ckeditor一鍵排版功能實(shí)現(xiàn)方法分析
這篇文章主要介紹了ckeditor一鍵排版功能實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ckeditor一鍵排版相關(guān)擴(kuò)展插件定義、配置與使用方法,需要的朋友可以參考下2020-02-02深入JS函數(shù)中默認(rèn)參數(shù)的使用詳解
本文主要介紹了深入JS函數(shù)中默認(rèn)參數(shù)的使用詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07