您好,登錄后才能下訂單哦!
這篇文章主要介紹bootstrap如何實(shí)現(xiàn)table單元格新增行并編輯功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
table單元格新增行并編輯,具體內(nèi)容如下
需要
bootstrap.min.css —— [ Bootstrap ]
jquery-1.8.2.min.js —— [ Jquery ]
代碼
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> 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)容保存起來(lái) var text=td.text(); //2,清空td里面的內(nèi)容 td.html(""); //也可以用td.empty(); //3,建立一個(gè)文本框,也就是input的元素節(jié)點(diǎn) var input=$("<input>"); //4,設(shè)置文本框的值是保存起來(lái)的文本內(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"); } var row=0; function addtr(){ if(row<8){ row++; var table = $("#para_table"); var tr= $("<tr>" + "<td style='text-align: center;' onclick='tdclick(this)'>"+"</td>" + "<td style='text-align: center;' 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); }else{ alert("已達(dá)到發(fā)票能開具的最大商品明細(xì)行數(shù)"); } } function deletetr(tdobject){ row--; var td=$(tdobject); td.parents("tr").remove(); } </script> <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"> </head> <body> <table class="table table-bordered" id="para_table"> <thead> <tr> <th width="200">名稱</th> <th width="200">值</th> <th width="100">操作</th> </tr> </thead> <tbody> <tr> <td onclick="tdclick(this)"></td> <td onclick="tdclick(this)"></td> <td onclick="deletetr(this)"><button type="button" class="btn btn-xs btn-link">刪除</button></td> </tr> </tbody> </table> <div id="addtrdiv" > <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button> </div> </body> </html>
效果圖:
以上是“bootstrap如何實(shí)現(xiàn)table單元格新增行并編輯功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。