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 相关文章推荐
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
在webstorm中配置less的方法详解
Sep 25 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
PHP网上调查系统
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python实现用户答题功能
2018/01/17 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python删除字符串中指定字符的方法
2018/08/13 Python
详解python3中的真值测试
2018/08/13 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
python2和python3哪个使用率高
2020/06/23 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
Ruby如何进行文件操作
2014/07/17 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
交通事故调解协议书
2014/04/16 职场文书
文艺晚会策划方案
2014/06/11 职场文书
校园活动策划方案
2014/06/13 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
个人合作协议范本
2015/08/06 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android