一个可以增加和删除行的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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
详解JavaScript对象类型
Jun 16 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 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
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
使用python实现ANN
2017/12/20 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
师德建设实施方案
2014/03/21 职场文书
房屋转让协议书
2014/04/11 职场文书
经典演讲稿汇总
2014/05/19 职场文书
同志主要表现材料
2014/08/21 职场文书
党员个人总结自评
2015/02/14 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
Java中的继承、多态以及封装
2022/04/11 Java/Android