一个可以增加和删除行的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判断字符长度以及中英文数字等
Dec 31 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
浅谈Vue的响应式原理
May 30 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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版(2)
2006/10/09 PHP
PHP脚本的10个技巧(4)
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php eval函数一句话木马代码
2015/05/21 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
javascript新手语法小结
2008/06/15 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
Jquery实现鼠标移动放大图片功能实例
2015/03/25 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python+os根据文件名自动生成文本
2019/03/21 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
如何让python的运行速度得到提升
2020/07/08 Python
Python如何实现远程方法调用
2020/08/07 Python
商场主管竞聘书
2014/03/31 职场文书
社团活动总结怎么写
2014/06/30 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python