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

/* 

页面装载时，为每个td增加单击事件，这样，就可以不用对每个页面进行更改。
添加单击事件属性。此处不可使用setAttribute方法。
*/
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;
} 

链接:https://www.jb51.net/article/33171.htm

修改如下:

如下完整代码::

1.创建id名为tdcag的DIV,内部为input输入栏(添加聚焦/离焦事件),用来接收用户输入的数值,放在该td中

2.离焦时间中添加对应操作,最后一步innerHTML赋值,将生成的id名为tdcag的div覆盖,显示最终结果

用window获得的td,会报错跨域请求::解决方法:传输this获得该td

 

onblur=fun();是触发离焦事件

$("#txtId").unbind("input propertychange").bind("input propertychange",function(){......此处是监听数值变动实时触发})

如下修改调整为::数值改变可以实时观看其他关联数值变动

 循环表格中某一td,得出总数如下::