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


Posted in Javascript onJanuary 10, 2013

项目做完,在测试验收时,用户突然提出,可以更改查询结果,便于打印。隐藏工程错误。但是这个时候提要求,比较头痛,后来,想了想还是用前台代码,这样,只要在项目的JS文件中,加入以下几个函数,便可以解决了。

/* 
页面装载时,为每个td增加单击事件,这样,就可以不用对每个页面进行更改。 
*/ 
function ReWritable() 
{ 
var tbmian=document.getElementById("tbmain"); 
for(var i=0;i<tbmain.rows.length;i++) 
{ 
for(var j=0;j<tbmain.rows[i].cells.length;j++) 
{ 
/* 
添加单击事件属性。此处不可使用setAttribute方法。 
*/ 
tbmain.rows[i].cells[j].onclick=AddObjOfText; 
} 
} 
} 
/* 
单击事件,将Td内容更新为一个Div,其中装载了一个Text,用于用户输入新的Td的值, 
一个确定按钮,一个取消按钮,用于保存或取消用户的输入内容。 
一个Hidden,保存用户输入新值前的Td的值,以便用户取消时恢复。 
*/ 
function AddObjOfText() 
{ 
var tdcag=document.getElementById("tdcag"); 
if(tdcag!=null) 
{ 
return; 
} 
var tdid=window.event.srcElement; 
var tdtxt=tdid.innerText; 
var str="<div id='tdcag'><input type='text' id='txtId' value='"+tdtxt+"'>"; 
str+="<input type='button' value='确定' onclick='ChangeTdText()'>"; 
str+="<input type='button' value='取消' onclick='CancelTdChanged()'>"; 
str+="<input type='hidden' id='tdInitValue' value='"+tdtxt+"'>"; 
str+="</div>"; 
tdid.innerHTML=str; 
} 
/* 
取消更改,把Hidden值赋给Td 
*/ 
function CancelTdChanged() 
{ 
var tdInitValue=document.getElementById("tdInitValue"); 
var tdtxt=tdInitValue.value; 
var tdid=document.getElementById("tdcag").parentNode; 
tdid.innerText=tdtxt; 
} 
/* 
保存用户更改,把Text值赋值给Td 
*/ 
function ChangeTdText() 
{ 
var txtId=document.getElementById("txtId"); 
var tdid=document.getElementById("tdcag").parentNode; 
tdid.innerText=txtId.value; 
}

这样,在页面的<body>中,添加onload事件,其值赋为:ReWritable(),如下:
<body onload="ReWritable();"> 
<table id="tbmain" style="width:100%;" border="1"> 
<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>

这样,每个Td中,便添加了一个单击事件。
Javascript 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
Apr 08 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
jQuery原理系列-常用Dom操作详解
Jun 07 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 #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
You might like
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php验证码实现代码(3种)
2015/09/07 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
js函数般调用正则
2008/04/08 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
python实现两个文件合并功能
2018/04/01 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
项目经理任命书
2014/06/04 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
会议新闻稿
2015/07/17 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
赞美教师的句子
2019/09/02 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Python中npy和mat文件的保存与读取
2022/04/24 Python
深入理解pytorch库的dockerfile
2022/06/10 Python