频道导航

bootstrap table实现双击可编辑、添加、删除行功能

2019-01-07 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了bootstrap table实现双击可编辑、添加、删除行功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下

html：

名称删除 <div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;">
<button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加

js：

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=$("");
//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>" +
""+"</td>" +
"</td></tr>");
table.append(tr);
}
function deletetr(tdobject){
var td=$(tdobject);
td.parents("tr").remove();
}