動態建立table表格併為每一個td單元格註冊點選事件

antzone發表於2017-03-22
事件

本章節通過例項程式碼介紹一下如何利用javascript動態建立一個表格，並且為表格的每一個td單元格註冊click事件處理函式，當然下面的程式碼可能在實際應用中一無是處，但是可以作為參考之用，可以從中獲取一些實現的思路。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table{
  border:1px solid #ccc;
  border-collapse:collapse;
}
table td{
  border:1px solid #ccc;
  padding:5px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var dateArray=["螞蟻部落","css教程","jQuery教程","antzone"];
  setTable(2,dateArray);
}
function setTable(trLineNumber,tdData){ 
  var _table=document.getElementById("table"); 
  var _row; 
  var _cell; 
  for(var i=0;i<trLineNumber;i++){ 
    _row = document.createElement("tr"); 
    document.getElementById("table").appendChild(_row); 
    for(var j=0;j<tdData.length;j++){ 
      _cell = document.createElement("td"); 
      _cell.onclick= function(){
     getColumnDetail(this)
      };
      _cell.innerText = tdData[j]; 
      _row.appendChild(_cell); 
    } 
  } 
}
function getColumnDetail(column){ 
  column.style.color="blue";
}</script>
</head>
<body>
<table border="1">
  <tbody id="table">
  </tbody>
</table>
</body>
</html>

以上程式碼實現了我們的要求，能夠動態的常見一個表格，並且為表格中的每一個單元格註冊事件處理函式，點選單元格的時候能夠將單元格中的內容設定為藍色。

一.程式碼註釋:

1.window.onload=function(){}，文件完全載入完畢再去執行函式中的程式碼。

2.var dateArray=["螞蟻部落","css教程","jQuery教程","antzone"]，建立一個數字，陣列的中資料就是表格每一行中單元格的資料。

3.setTable(2,dateArray)，建立一個具有兩個行的表格。

4.function setTable(trLineNumber,tdData){}，建立表格的函式，第一個引數是表格的行數，第二個是表格中行的資料。

5.var _table=document.getElementById("table")，獲取一個tbody物件。

6.var _row，宣告變數用作儲存變數行物件。

7.var _cell，宣告變數用作儲存變數單元格。

8.for(var i=0;i<trLineNumber;i++){}，通過for語句的方式挨個建立行並新增響應的單元格並註冊單元格事件處理函式。

9._row = document.createElement("tr")，建立一個行。

10.document.getElementById("table").appendChild(_row)，為tbody追加行。

11.for(var j=0;j<tdData.length;j++){}，使用for迴圈的方式追加單元格並註冊事件處理函式。

12._cell = document.createElement("td")，建立一個單元格。

13._cell.onclick= function(){getColumnDetail(this)}，註冊click事件處理函式。

14._cell.innerHTML= tdData[j]，設定單元格中的內容。

15._row.appendChild(_cell)，為行新增單元格。

二.相關閱讀:

1.document.createElement()函式可以參閱js createElement()一章節。

2.onclick事件可以參閱javascript click 事件一章節。

相關文章