一个可以增加和删除行的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插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
js实现无缝轮播图特效
May 09 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python3.7 的新特性详解
2019/07/25 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
平面设计的岗位职责
2013/11/08 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
从事会计工作年限证明
2015/06/23 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python