一个可以增加和删除行的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 通过模式匹配实现重载
Aug 12 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
node.js中的console用法总结
Dec 15 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
Vue实现简单分页器
Dec 29 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
AngularJS基础知识
2014/12/21 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
vue实现计步器功能
2019/11/01 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
python Django框架实现自定义表单提交
2016/03/25 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
对Python 数组的切片操作详解
2018/07/02 Python
python单例模式的多种实现方法
2019/07/26 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
公交公司毕业生求职信
2014/02/15 职场文书
给医院的感谢信
2015/01/21 职场文书
垂直极限观后感
2015/06/08 职场文书
新闻通讯稿模板
2015/07/22 职场文书
《陶罐和铁罐》教学反思
2016/03/03 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android