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图片自动轮播代码分享(js图片轮播)
May 06 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
vue之nextTick全面解析
May 17 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
从刷票了解获得客户端IP的方法
2015/09/21 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
三年级学生评语大全
2014/12/26 职场文书