一个可以增加和删除行的table并可编辑表格中内容
2014-06-16 00:00
260 查看
页面文件
js文件
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript" src="jquery-1.6.min.js"></script> <script type="text/javascript" src="queryi18n.js"></script> <script type="text/javascript"> </script> </head> <body oncontextmenu="return false"> <form id="i18nform"> <div id="i18ntablediv" style="width: 90%;"> <table id="i18ntable" border="1px" width="90%"> <tr> <th width='45%' height='20px'>key</th> <th width='45%' height='20px'>value</th> <th width='5%' height='20px'>value</th> </tr> </table> </div> <div id="addtrdiv" style="width: 10%; float: right;"> <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addtr()"><span key="ss" class="paltform-i18n">添加行</span></a> </div> <div class="button_area_absolute"> <table width="90%"> <tr> <td align=center><a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savei18ninfo()"><span key="save" class="paltform-i18n">保存</span></a></td> </tr> </table> </div> </form> </body> </html>
js文件
//保存国际化文件 function savei18ninfo(){ var i18ninfo = geti18ninfo(); alert(i18ninfo); } //获取i18n值 function geti18ninfo(){ var key = ""; var value = ""; var i18ndata = ""; var table = $("#i18ntable"); 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){ i18ndata += "{\""+key+"\",\""+value+"\"}"; }else{ i18ndata += "{\""+key+"\",\""+value+"\"},"; } } i18ndata = "["+i18ndata+"]"; return i18ndata; } var clientWidth = document.documentElement.clientWidth; var clientHeight = document.documentElement.clientHeight; var div_left_width = 200; var tempWidth = 0; /** * 描述:页面自适应 */ $(window).bind("resize",function(){ resizeLayout(); }); function resizeLayout(){ try{ clientWidth = document.documentElement.clientWidth; var div_left_width = $("#left").width()+11; $("#cc").layout("resize"); $('#userquery').panel('resize',{width:clientWidth-div_left_width}); $('#10100801').datagrid('resize',{width:clientWidth-div_left_width}); $('#userrange').combobox({ width : $('#right').width() * 0.35 }); }catch(e){ } } function initResize(){ //自动适应页面大小 $(".layout-button-left").bind("click",function(){ $('#userquery').panel('resize',{width:clientWidth-28}); $('#10100801').datagrid('resize',{width:clientWidth-28}); $(".layout-button-right").bind("click",function(){ $('#userquery').panel('resize',{width:tempWidth}); $('#10100801').datagrid('resize',{width:tempWidth}); }); }); } 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 = $("#i18ntable"); var tr= $("<tr><td height='20px' onclick='tdclick(this)'>"+"</td><td height='20px' onclick='tdclick(this)'>"+"</td><td height='20px' align='center' onclick='deletetr(this)'><font size='2' color='red'>"+"删除"+"</font></td></tr>"); table.append(tr); } function deletetr(tdobject){ var td=$(tdobject); td.parents("tr").remove(); }
相关文章推荐
- 一个可以增加和删除行的table并可编辑表格中内容
- 可以增加和删除行的table(可以编辑表格中内容)
- 利用Jqurey写一个输入内容增加并且可以删除,上下移动的标签
- 编辑表格@tableView实现增加、删除、移动的操作
- 有一个table表格,选中某一行后,点击“查看(button)”按钮可以实现对该行内容的显示
- 有一个table表格,选中某一行后,点击“查看(button)”按钮可以实现对该行内容的显示
- JS实现可编辑的表格,双击可编辑,可以删除行和列,增加行和列,重置,导出表格,也可以上下移动元素
- javascript动态增加、删除、填充表格内容
- [Cocoa-4th] Chapter6 - NSTableView 表格操作:增加,删除,编辑
- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- 给phpcms v9专题添加一个radio单选按钮,可以多次利用专题创建不同的栏目进行内容编辑,给专题添加一个自定义字段
- 在TableViewer中如何给表格的单元格增加其他组件的编辑功能
- 表格教程:table的td也可以隐藏掉超出的内容
- 需求分析:做一个可以编辑的表格
- 在NSTableView排序时,我们可以通过增加一个小小的三角箭头图形,让表格的排序看得更加清楚。
- 利用table动态生成表格并填充内容/和panel做一个可控制显示/隐藏的小玩意
- javascript动态增加、删除、填充表格内容
- 可编辑的table. 添加数据,修改数据。稍加修改就可以部署到ajax 动态表格中
- javascript动态增加、删除、填充表格内容
- NSTableView 表格操作:增加,删除,编辑 [2]