bootstrap table edit 双击可编辑，添加、删除行

效果图：

 

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