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

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

时间: 2025-01-20 02:54:21

js修改table中Td的值(定义td的单击事件)_javascript技巧的相关文章

js修改table中Td的值(定义td的双击事件)_javascript技巧

客户需求至上. 这次是更改后的代码,去掉了"确定","取消"按钮.变单击为双击事件,用户按ESC键,取消更改. 复制代码 代码如下: //为每个Td添加双击事件 function ReWritable() { var tbmian=document.getElementById("tbmain"); //循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加. for(var i=1;i<tbmain.row

利用JS屏蔽页面中的Enter按键提交表单的方法_javascript技巧

如在设置了JS代码响应<p>标签的Enter按键触发事件时,根据冒泡型事件原则该事件会一直传到<from>表单处,并将表单提交.这不是我们想要的效果,我们可以设置如下代码来加以屏蔽: $(document).keydown(function(event){ switch(event.keyCode){ case 13:return false; } }); 但是,如果页面中有按钮时在Opera浏览器中同样会提交表单,这是因为按钮在生成的HTML代码中是submit类型的,解决办法是

js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解_javascript技巧

js:$("<li>"+(i==0?"class='cur'":"")+"</li>").appendTo("ul"); jsp: <c:forEach items="${list}" var="listValue" varStatus="idx">         <li class="${id

js和jquery中循环的退出和继续下一个循环_javascript技巧

作为水货,就是学会了1+1=3也要记录一下!错了,是2 学习记录: js中的 for(var i=1;i<5;i++){ if(i==3){ break; // 使用break,弹出2次提示分别为1,2:如果使用continue,则会弹出3次,分别是1,2,4 } alert(i); } 循环,退出循环,使用break:退出当前循环继续下一个循环,使用continue jquery中的each()方法中要实现break,使用return false:continue,使用return true

JS替换字符串中字符即替换全部而不是第一个_javascript技巧

有时候用JS替换字符串时,replyText= replyText.replace("aa",""); 这样只能替换掉字符串中第一个aa,有时候需要替换全部的aa,这种方法就不能使用了.. 可以用如下方法做参考: 复制代码 代码如下: function del_html_tags(str,reallyDo,replaceWith) { var e=new RegExp(reallyDo,"g"); words = str.replace(e, r

JS从数组中随机取出几个数组元素的方法_javascript技巧

JS如何从一个数组中随机取出一个元素或者几个元素. 假如数组为 var items = ['1','2','4','5','6','7','8','9','10']; 1.从数组items中随机取出一个元素 var item = items[Math.floor(Math.random()*items.length)]; 2.从前面的一篇随机数组中随机取几个元素 function getRandomArrayElements(arr, count) { var shuffled = arr.sl

js操作输入框中选择内容兼容IE及其他主流浏览器_javascript技巧

工作中遇到需要给输入框中选中的内容增加超链接 复制代码 代码如下: function addHref(des){ var selectedText=""; if(window.getSelection&&des != undefined){//兼容非IE浏览器,由于非IE浏览器需要给定操作的元素ID才可以获取输入元素中选中的内容,因此需要输入ID var textField=document.getElementById(des); var selectionStart

仅IE6/7/8中innerHTML返回值忽略英文空格的问题_javascript技巧

如下 复制代码 代码如下: <div id="user"> jack</div> <script> alert(document.getElementById('user').innerHTML.length); </script> div[id=user]中的文本"jack"前有两个英文空格,各浏览器下结果如下 IE6/7/8 : 弹出4,即忽略了空格 IE9/Firefox/Safari/Chrome/Opera

JS this作用域以及GET传输值过长的问题解决方法_javascript技巧

在开发项目的时候,前端遇到两个比较隐蔽的问题. 问题一.专IE7浏览器,IE URL参数过长问题,引发HTTP Status 122报错 原因:在IE6.8下没有什么问题,但在IE7就不兼容get参数过长,google上说"Don't use the GET method in Ajax Apps, if you can void it, because IE7 craps out with more than 2032 characters in a get string" 解决方法