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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python根据成绩分析系统浅析
2019/02/11 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
无偿献血倡议书
2014/04/14 职场文书
课程设计的心得体会
2014/09/03 职场文书
80后婚前协议书范本
2014/10/24 职场文书
租赁协议书
2015/01/27 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
钱学森电影观后感
2015/06/04 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
Python图像处理库PIL详细使用说明
2022/04/06 Python