一个可以增加和删除行的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 相关文章推荐
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
webpack打包js的方法
Mar 12 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
详解vue 组件注册
Nov 20 Vue.js
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
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
javascript preload&amp;lazy load
2010/05/13 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python简单商城购物车实例代码
2018/03/15 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
详解Python装饰器
2019/03/25 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
JAVA中运算符的分类及举例
2015/09/12 面试题
应届生保险求职信
2013/11/11 职场文书
教师实习自我鉴定
2013/12/18 职场文书
《胡杨》教学反思
2014/02/16 职场文书
学习之星事迹材料
2014/05/17 职场文书
求职教师自荐书
2014/06/19 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
2015年超市工作总结
2015/04/09 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
pytorch 如何使用float64训练
2021/05/24 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android