本文实例为大家分享了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; " onclick="tdclick(this)"></td> <td style="text-align:center; " onclick="tdclick(this)"></td> <td style="text-align:center; " onclick="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" onclick="addtr()">添加</button> </div>
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<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 onclick='tdclick(this)'>"+"</td>" + "<td onclick='tdclick(this)'>"+"</td>" + "<td align='center' onclick='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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
bootstrap,table
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“bootstrap table实现双击可编辑、添加、删除行功能”评论...
更新动态
2024年09月27日
2024年09月27日
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 纯音入心系列纯音乐《古筝佛曲》1CD[MP3][411.1MB]
- 纯音入心系列纯音乐《古筝世界名曲》1CD[MP3][38.9MB]
- 纯音入心系列纯音乐《古筝新奏-菩提妙音》1CD[MP3][112.3MB]
- 陈思安.1993-怀念福建金曲5CD【歌丽美】【WAV+CUE】
- 张学友.1999-有个人【宝丽金】【WAV+CUE】
- 许美静.1999-快乐无罪【上华】【WAV+CUE】
- 群星.2024-Jambo.Medley(BEYOND40周年·致敬2)【Kinns】【FLAC分轨】
- 林翠萍.1991-舞曲世界2辑【星河】【WAV+CUE】
- 关智斌.2007-In.Progress【英皇娱乐】【FLAC分轨】
- 群星.2000-电影主题曲原声带·琼瑶的世界【歌林】【WAV+CUE】
- 范世錡.2024-錡妙夜(EP)【天娱传媒】【FLAC分轨】
- 谭咏麟.2000-魅力千禧演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 纯音入心系列纯音乐《器乐古筝》1CD[MP3][239MB]
- 纯音入心系列纯音乐《华夏民乐之古筝篇》1CD[MP3][192MB]