加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-18 00:34:27 所属栏目:安全 来源:网络整理
导读:本文实例为大家分享了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

本文实例为大家分享了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();
}

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读