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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js修改table中Td的值(定义td的单击事件)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1994字，纯文字阅读大概需要3分钟。

内容图文

项目做完，在测试验收时，用户突然提出，可以更改查询结果，便于打印。隐藏工程错误。但是这个时候提要求，比较头痛，后来，想了想还是用前台代码，这样，只要在项目的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中，便添加了一个单击事件。

内容总结

以上是互联网集市为您收集整理的js修改table中Td的值(定义td的单击事件)全部内容，希望文章能够帮你解决js修改table中Td的值(定义td的单击事件)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367461.html

来源：【匿名】