bootstrap table单元格新增行并编辑

2019-11-19 16:32:57

字体：大中小

来源：转载

供稿：网友

table单元格新增行并编辑，具体内容如下

需要

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,取出当前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"); }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("已达到发票能开具的最大商品明细行数");  }} 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 style="text-align:center" width="200">名称</th>   <th style="text-align:center" width="200">值</th>   <th style="text-align:center" width="100">操作</th>  </tr> </thead> <tbody>  <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> </tbody></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></body></html>

效果图：