js修改table中Td的值(定義td的點選事件)_javascript技巧

項目做完，在測試驗收時，使用者突然提出，可以更改查詢結果，方便列印。隱藏工程錯誤。但是這個時候要提要求，比較頭痛，後來，想了想還是用前台代碼，這樣，只要在專案的JS文件中，加入以下幾個函數，便可以解決了。

複製程式碼 程式碼如下:

/*
頁裝載時，每個裝載時，為每個td增加點擊事件，這樣，就可以不用對每個頁面進行更改。
*/
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
for(var i=0;i{
for(var j=0;j{
　　/*
新增點選事件屬性。此處不可使用setAttribute方法。
*/
tbmain.rows[i].cells[j].onclick=AddObjOfText;
}
}
}
/*
點選事件，將Td內容更新為一個Div，其中裝載了一個Text，用於用戶輸入新的Td的值，
一個確定按鈕，一個取消按鈕，用於保存或取消用戶的輸入內容。
一個Hidden，保存使用者輸入新值前的Td的值，以便使用者取消時恢復。
*/
function AddObjOfText()
{
var tdcag=document.getElementById("tdcag");
if(tagag!=null)
dcag");
if(tdcag!=null)
dcturn;
}
var tdid=window.event.srcElement;
var tdtxt=tdid.innerText;
var str="

";
str ="";
str ="";
str ="";
str ="

";
tdid.innerHTML=str;
}
/*
取消更改，把Hidden值賦給Td
*/
function CancelTdChanged( )
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid=document.getElementById("tNodeag")。 tdid.innerText=tdtxt;
}
/*
儲存使用者更改，把Text值賦值給Td
*/
function ChangeTdText()
{
var txtId= document.getElementById("txtId");
var tdid=document.getElementById("tdcag").parentNode;
tdid.innerText=txtId.value;
}

這樣，在頁面的中，加入onload事件，其值賦為：ReWritable()，如下：

複製程式碼

程式碼如下:

11	12	13
21	22	23 td>
31	32	33

這樣，每個Td中，便添加了一個單擊事件。