<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        bootstrap table實現雙擊可編輯、添加、刪除行功能

        來源:懂視網 責編:小OO 時間:2020-11-27 22:28:53
        文檔

        bootstrap table實現雙擊可編輯、添加、刪除行功能

        本文實例為大家分享了bootstrap table雙擊可編輯的具體代碼,供大家參考,具體內容如下: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>;<;<。
        推薦度:
        導讀本文實例為大家分享了bootstrap table雙擊可編輯的具體代碼,供大家參考,具體內容如下: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>;<;<。

        本文實例為大家分享了bootstrap table雙擊可編輯的具體代碼,供大家參考,具體內容如下

        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,取出當前td中的文本內容保存起來 
         var text=td.text(); 
         //2,清空td里面的內容 
         td.html(""); //也可以用td.empty(); 
         //3,建立一個文本框,也就是input的元素節點 
         var input=$("<input>"); 
         //4,設置文本框的值是保存起來的文本內容 
         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,清除點擊事件 
         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(); 
        } 
        

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        bootstrap table實現雙擊可編輯、添加、刪除行功能

        本文實例為大家分享了bootstrap table雙擊可編輯的具體代碼,供大家參考,具體內容如下: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>;<;<。
        推薦度:
        標簽: 添加 tab 刪除行
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 永久免费av无码网站韩国毛片| 99久久成人国产精品免费| 亚洲精品免费在线| 久久亚洲AV成人出白浆无码国产| 亚洲国产成人影院播放| 老司机午夜精品视频在线观看免费| 国产精品午夜免费观看网站| 午夜亚洲福利在线老司机| 亚洲精品乱码久久久久久下载 | 久99精品视频在线观看婷亚洲片国产一区一级在线 | 成人永久免费高清| 亚洲精品成人无码中文毛片不卡| 一级看片免费视频| 妻子5免费完整高清电视| 国产成人亚洲精品| 国产又黄又爽又猛的免费视频播放| 亚洲AV无码国产一区二区三区| 亚洲AV成人潮喷综合网| 本免费AV无码专区一区| 亚洲午夜免费视频| 99在线精品免费视频九九视| 亚洲日本天堂在线| 亚洲午夜久久久久久久久久| 婷婷国产偷v国产偷v亚洲| 91免费国产自产地址入| 77777亚洲午夜久久多人| 久久久久成人片免费观看蜜芽| 亚洲日本在线播放| 免费jjzz在线播放国产| 男女一边摸一边做爽的免费视频| 老司机永久免费网站在线观看| 日韩免费码中文在线观看| 日韩免费无砖专区2020狼| xxxxx做受大片视频免费| 亚洲黄色免费电影| 国产成人无码a区在线观看视频免费| 国产精品青草视频免费播放| 亚洲精品成人久久| 亚洲午夜无码片在线观看影院猛 | 国产一区二区三区无码免费| 爽爽爽爽爽爽爽成人免费观看|