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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 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
discuz7 phpMysql操作类
2009/06/21 PHP
php cli换行示例
2014/04/22 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python使用Scrapy爬取妹子图
2015/05/28 Python
详解python开发环境搭建
2016/12/16 Python
python实现微信小程序自动回复
2018/09/10 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
基于python实现模拟数据结构模型
2020/06/12 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
小型女装店的创业计划书
2014/01/09 职场文书
大学生村官事迹材料
2014/01/21 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
实施意见格式范本
2015/06/05 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
Elasticsearch 批量操作
2022/04/19 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android