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 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();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。