bootstrap table单元格新增行并编辑
2017-05-19 10:24
786 查看
table单元格新增行并编辑,具体内容如下
需要
bootstrap.min.css ―― [ Bootstrap ]
jquery-1.8.2.min.js ―― [ Jquery ]
代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> 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"); } var row=0; function addtr(){ if(row<8){ row++; var table = $("#para_table"); var tr= $("<tr>" + "<td style='text-align: center;' onclick='tdclick(this)'>"+"</td>" + "<td style='text-align: center;' 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); }else{ alert("已达到发票能开具的最大商品明细行数"); } } function deletetr(tdobject){ row--; var td=$(tdobject); td.parents("tr").remove(); } </script> <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"> </head> <body> <table class="table table-bordered" id="para_table"> <thead> <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> </thead> <tbody> <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> </tbody> </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> </body> </html>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 怎样算是一个合格的编辑?
- eclipse下安装js插件:spket(支持Ext编辑)
- 解决myeclipse10编辑jsp经常卡死的问题
- 如何去年gedit编辑文件时生成的临时文件
- [置顶] CSDN博客编辑用html记录
- 使Edit类编辑控制的内容滚动到想要的位置
- 编辑框大写锁定气泡提醒
- struts2设置index.action为主页(另:web.xml编辑卡死问题解决)
- Ubuntu系统下终端进入vi编辑界面,按insert无法进入编辑插入状态?
- Chm 文件资源编辑软件
- 七个高效的编辑文本的习惯
- Emacs编辑命令速查表1【摘自Learning Gnu Emacs】
- VS2010如何编辑32bits图标
- 使用sublime同步编辑线上脚本
- C++ MFC / VS2013 edit control 编辑框 逐行显示 txt ,显示多行,底部更新
- 人民邮电出版社与作者陈黎夫共同举办在线编辑、作者交流活动
- ArcEngine编辑功能(三)
- extjs4 编辑数据时的回显
- ztree编辑时默认选中
- 解决python脚本在window编辑后linux不能执行的问题