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

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