JS实现表格单元格Td内容在线编辑功能

实现表格单元格在线编辑的JS方案

项目进入测试验收阶段时，用户提出希望能够直接修改查询结果以便打印，甚至可能用于隐藏某些工程错误。虽然此时提出此类需求较为棘手，但经过权衡，决定采用前端JS方案解决。只需在项目的JS文件中添加特定函数即可实现该功能。

 
/* 
在页面加载完成后，遍历并为每个Td元素绑定单击事件，从而避免对每个页面进行单独修改。
*/ 
绑定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结构。
该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>";
} 
/* 
取消更改时，将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;
} 

页面加载与HTML结构配置

在页面的<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中便成功添加了一个单击事件。