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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
详解CocosCreator项目结构机制
Apr 14 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
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php英文单词统计器
2016/06/23 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
javascript第一课
2007/02/27 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
中学生个人自我评价
2014/02/06 职场文书
文明之星事迹材料
2014/05/09 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server
MySQL 语句执行顺序举例解析
2022/06/05 MySQL