動態建立table表格併為每一個td單元格註冊點選事件
本章節通過例項程式碼介紹一下如何利用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 事件一章節。
相關文章
- 表格td單元格合併
- elementui表格動態資料單元格合併UI
- JavaScript 獲取表格指定td單元格JavaScript
- jQuery獲取點選td單元格的值jQuery
- table表格單元格橫向和屬性合併
- table 表格單元格橫向與縱向合併
- JavaScript動態建立table表格JavaScript
- js 獲取 table 中的每一個tdJS
- 表格單元格點選操作(彈窗)
- js 表格合併單元格JS
- vue表格合併單元格Vue
- vxe-table 樹表格單元格選擇複製貼上
- element中表格合併單元格
- Bootstrap-table 合併相同單元格boot
- JavaScript動態為table表格新增行JavaScript
- JavaScript 遍歷td單元格JavaScript
- 記錄vxe-table合併單元格
- 67,表格中單元格td自適應高度,最大高度後滾動條顯示
- excel合併單元格快捷鍵 excel多個表格內容合併到一起Excel
- js實現table合併相同列單元格JS
- vxe-table 使用單元格選取功能
- 動態建立具有刪除行按鈕的table表格
- 記錄一個Flutter 3.24單元測試點選事件bugFlutter事件
- elementui——表格的相同內容單元格合併UI
- NodeJs 建立一個簡單的登陸註冊NodeJS
- table表格tr行點選高亮
- JavaScript 獲取td單元格內容JavaScript
- el-table自定義合併單元格後,單元格錯亂的問題
- vxe-table 單元格選取功能與多個區域選取功能
- 動態註冊和靜態註冊
- React table 表單裡的內容點選事件React事件
- vxe-table 單選、實現表格單選資料
- JavaScript合併表格中的內容相同的單元格JavaScript
- js動態新增、刪除table中的tr、td、inputJS
- oracle的靜態註冊和動態註冊Oracle
- 關於HTML表格合併單元格的靈魂拷問HTML
- JavaScript動態建立表格和增加表格的行JavaScript
- Android中動態註冊Android
- vue動態註冊元件Vue元件