一个可以增加和删除行的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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 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
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
JavaScript 异步调用
2017/10/25 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python对execl 处理操作代码
2020/06/22 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
企业门卫岗位职责
2013/12/12 职场文书
教师党员思想汇报
2014/01/06 职场文书
委托书的写法
2014/09/16 职场文书
歌剧魅影观后感
2015/06/05 职场文书
新闻稿怎么写
2015/07/18 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
Python字符串常规操作小结
2022/04/03 Python