添加和删除行的能力table（能够编辑的表的内容）

页面文件

<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 οncοntextmenu="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" οnclick="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" οnclick="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' οnclick='tdclick(this)'>"+"</td><td height='20px' οnclick='tdclick(this)'>"+"</td><td height='20px' align='center' οnclick='deletetr(this)'><font size='2' color='red'>"+"删除"+"</font></td></tr>");table.append(tr);
}
function deletetr(tdobject){var td=$(tdobject);td.parents("tr").remove();
}

添加和删除行的能力table（能够编辑的表的内容）相关推荐

Axure 9 元件学习——中继器原理/中继器添加、删除行
一.中继器的原理 1.什么是中继器? 中继器就是一个容器,是用来承载数据的,相当于数据库中对某元素做的一个表单. 2.原理示意图中继器数据的存入有两种方式,一种是提前配置,另一种是用户输入,最终数据 ...
一篇文学会商用可编辑问卷表单制作【iVX 十二】
公共表单在 iVX 快速教程中,我们使用一个公共表单项目作为 WebApp 应用的演示说明.公共表单项目可以用于企业内部或一个问卷公共平台做问卷调查,用户可以自由的设置表单元素以及样式,并且可以手动 ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
在表格中添加行和删除行
在我们刚接触MVC项目的时候,遇见的表格几乎都是固定的,不可以编辑,也不支持任意添加行和删除行,经常使用的bootstrap的人都知道,目前bootstrap表格都是固定的行数或者是根据数据的数量来决 ...
Antd Table 可编辑表格
antd Table 官方文档提及了可编辑单元格.可编辑行,这里解决可编辑表格主要思路是将 antd Table 可编辑行与 antd Form.List 相结合,将Table视为 Form. ...
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...
jeecgboot前端自定义组件、JgEditable Table行编辑表格
上一篇本次示例全部是在新建的Demo.vue中操作 jeecgboot前端自定义组件 1.首先,在webstrom中找到ant-design-vue-jeecg/src/views/jeecg/mo ...
SWT/JFACE表格Table可编辑
SWT/JFACE表格Table可编辑 2009-10-12 22:52 今天刚好遇到了这个问题写了个例子,. public class Test { public static String []N ...
mysql2012更改表名_sql alter table修改数据库的表名字
SQL基础语句总结前言: SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言SQL 使我们有能力访问数据库SQL 是一种 ANSI 的标准计算机语言编者注 ...

添加和删除行的能力table（能够编辑的表的内容）

添加和删除行的能力table（能够编辑的表的内容）相关推荐

最新文章

热门文章