一个可以增加和删除行的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 bind事件使用详解
May 05 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
微信小程序轮播图swiper代码详解
Dec 01 Javascript
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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
python简单猜数游戏实例
2015/07/09 Python
Python中的字符串替换操作示例
2016/06/27 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
大学毕业生简单自荐信
2013/11/05 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
五年级数学教学反思
2014/02/11 职场文书
中学生励志演讲稿
2014/04/26 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers