js修改table中Td的值(定义td的双击事件)


Posted in Javascript onJanuary 10, 2013

客户需求至上。
这次是更改后的代码,去掉了“确定”,“取消”按钮。变单击为双击事件,用户按ESC键,取消更改。

//为每个Td添加双击事件 
function ReWritable() 
{ 
var tbmian=document.getElementById("tbmain"); 
//循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加。 
for(var i=1;i<tbmain.rows.length-1;i++) 
{ 
for(var j=0;j<tbmain.rows[i].cells.length;j++) 
{ 
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick; 
} 
} 
} 
//定义td的双击事件,为其添加文本框,使用用户可以输入。 
function TdDoubleClick() 
{ 
//首先判断是不是该方格已经存在文本框,如果存在,则返回,不重复添加文本框。如果不存在,则添加。 
var tdcag=document.getElementById("tdcag"); 
var tdid=null; 
var txtid=null; 
var curtd=window.event.srcElement; 
if(tdcag!=null)//已经存在,返回。 
{ 
return; 
} 
//不存在,则添加 
tdid=window.event.srcElement; 
tdtxt=tdid.innerText; 
tdtxt=Trim(tdtxt); 
var str="<div id='tdcag'><input type='text' onblur='ChangeTdText();' id='txtId' value='"+tdtxt+"'>"; 
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>"; 
str+="</div>"; 
tdid.innerHTML=str; 
//使文本框获得焦点。 
document.getElementById("txtId").focus(); 
var ctr=document.getElementById("txtId").createTextRange(); 
ctr.collapse(false); 
ctr.select(); 
} 
//去除字符串前后的空格。 
function Trim(str) 
{ 
return str.replace(/(^\s*)|(\s*$)/g, ""); 
} 
//定义KeyPress按下时的事件,如果是ESC键,则取消更改,恢复为更改前的值。 
document.onkeypress = function EscKeyPress() 
{ 
if(event.keyCode==27) 
{ 
CancelTdChanged(); 
return; 
} 
} 
//取消更改, 
function CancelTdChanged() 
{ 
var tdInitValue=document.getElementById("tdInitValue"); 
var tdtxt=tdInitValue.value; 
var tdid=document.getElementById("tdcag").parentNode; 
tdid.innerText=Trim(tdtxt); 
} 
//确定更改, 
function ChangeTdText() 
{ 
var txtId=document.getElementById("txtId"); 
if(txtId==null) 
{ 
return; 
} 
var tdid=document.getElementById("tdcag").parentNode; 
tdid.innerText=Trim(txtId.value); 
return; 
}

其它代码,与以前相同。只是取消了对表的Thead与Tfoot的更改。
<body onload="ReWritable();"> 
<table id="tbmain" style="width:100%;" border="1"> 
<thead> 
<tr> 
<td>thead,thead,thead</td> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<td> 
tfoot,tfoot,tfoot 
</td> 
</tr> 
</tfoot> 
<tr> 
<td>11 
</td> 
<td>12 
</td> 
<td>13</td> 
</tr> 
<tr> 
<td>21 
</td> 
<td>22 
</td> 
<td>23 
</td> 
</tr> 
<tr> 
<td>31 
</td> 
<td>32 
</td> 
<td>33 
</td> 
</tr> 
</table> 
</body>
Javascript 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
jQuery之动画效果大全
Nov 09 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
javascript之Partial Application学习
Jan 10 #Javascript
javascript之典型高阶函数应用介绍二
Jan 10 #Javascript
javascript之典型高阶函数应用介绍
Jan 10 #Javascript
根据json字符串生成Html的一种方式
Jan 09 #Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 #Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 #Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 #Javascript
You might like
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
jquery each()源代码
2011/02/14 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Vue 实现拨打电话操作
2020/11/16 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
校长岗位职责
2013/11/26 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
单位考核聘任报告
2015/03/02 职场文书
世界名著读书笔记
2015/06/25 职场文书
2016年公司“3.12”植树节活动总结
2016/03/16 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python