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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
微信小程序实现弹框效果
May 26 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验证码类代码分享(已封装成类)
2011/07/17 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
html读出文本文件内容
2007/01/22 Javascript
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
带你了解python装饰器
2017/06/15 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python爬虫中多线程的使用详解
2019/09/23 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
学校卫生检查制度
2014/02/03 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
四大名著读书笔记
2015/06/25 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
深入理解 Golang 的字符串
2022/05/04 Golang