一个可以增加和删除行的table并可编辑表格中内容


Posted in Javascript onJune 16, 2014

页面文件

<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(); 
}
Javascript 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
angular 服务随记小结
May 06 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
javascript动态判断html元素并执行不同的操作
Jun 16 #Javascript
Js实现滚动变色的文字效果
Jun 16 #Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 #Javascript
Javascript图片上传前的本地预览实例
Jun 16 #Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 #Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 #Javascript
javascript进行数组追加方法小结
Jun 16 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php的socket编程详解
2016/11/20 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
多种方法实现JS动态添加事件
2013/11/01 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
python中定义结构体的方法
2013/03/04 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python守护线程用法实例
2017/06/23 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
python实现canny边缘检测
2020/09/14 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
售后服务承诺书范文
2014/03/26 职场文书
节能宣传周活动总结
2014/05/08 职场文书
学校与家长安全责任书
2014/07/23 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL