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

weixin_39634480

于 2020-12-22 02:14:37 发布

788

 收藏 3

文章标签： bootstrap表格 行编辑状态

版权

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

}

————————————————

版权声明：本文为CSDN博主「weixin_39634480」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_39634480/article/details/111815072