bootstrap表格 行编辑状态_详解bootstrap table双击可编辑、添加、删除行

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

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

html：

名称	值	操作
		删除

添加

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

var tds = trs.eq(i).children();

for(var j=0;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= $("

" +

"

"+"" +

"

"+"" +

"

"+"删除"+"");

table.append(tr);

}

function deletetr(tdobject){

var td=$(tdobject);

td.parents("tr").remove();

}

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

以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。