700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > bootstrap table 双击可编辑 添加 删除行

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

时间:2020-10-16 07:42:25

相关推荐

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

如图:

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; " οnclick="tdclick(this)"></td><td style="text-align:center; " οnclick="tdclick(this)"></td><td style="text-align:center; " οnclick="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" οnclick="addtr()">添加</button></div>

js:

function save_para_table(){var tableinfo = gettableinfo();alert(tableinfo);}//get table infomationfunction 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 οnclick='tdclick(this)'>"+"</td>" +"<td οnclick='tdclick(this)'>"+"</td>" +"<td align='center' οnclick='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();}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。