js如何實現動態點擊改變單元格顏色？
一、總結
1、通過table的rows屬性，遍歷表格所有行，然后通過cells屬性，遍歷每一行中的單元格。
2、遍歷的過程中，動態的為每一個單元格定義單擊事件，改變單元格的背景色
二、js如何實現動態點擊改變單元格顏色？
1、動態改變單元格背景色案例
- 實例描述：
單擊單元格后改變其背景顏色,再次單擊則恢復之前樣式
- 案例要點：
- 通過table的rows屬性，遍歷表格所有行，然后通過cells屬性，遍歷每一行中的單元格。
- 遍歷的過程中，動態的為每一個單元格定義單擊事件，改變單元格的背景色
2、用到的表格屬性和方法
Table 對象集合
- cells[] 返回包含表格中所有單元格的一個數組。
語法：tableObject.cells[]
- rows[] 返回包含表格中所有行的一個數組。
rows 集合返回表格中所有行的一個數組。該集合包括 thead、tfoot 和 tbody 中定義的所有行。
三、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格專題</title> 6 </head> 7 <body> 8 <table id="tab" border="1"> 9 <caption>表格名稱</caption> 10 <thead> 11 <tr> 12 <th colspan="3">標題1</th> 13 </tr> 14 </thead> 15 <tbody> 16 <tr> 17 <td>單元格11</td> 18 <td>單元格12</td> 19 <td>單元格13</td> 20 </tr> 21 <tr> 22 <td>單元格21</td> 23 <td>單元格22</td> 24 <td>單元格23</td> 25 </tr> 26 <tr> 27 <td>單元格31</td> 28 <td>單元格32</td> 29 <td>單元格33</td> 30 </tr> 31 </tbody> 32 <tfoot><td>備注：</td><td colspan="2"></td></tfoot> 33 </table> 34 <script type="text/javascript"> 35 /* 36 var tab=document.getElementById('tab') //獲取表格元素 37 var rows=tab.rows; //返回包含表格中所有行的一個數組。 38 var rlen=rows.length; 39 alert(rlen) 40 //var cells=tab.cells; 41 //var clen=cells.length //這種寫法會出錯 42 cells=rows[1].cells //某一行的單元格 43 alert(cells.length) 44 */ 45 function tabCell(){ 46 var tab=document.getElementById('tab') 47 var rows=tab.rows; 48 var rlen=rows.length; 49 for (var i = 1; i <rlen; i++) { //遍歷所有行 50 var cells=rows[i].cells; //得到這一行的所有單元格 51 for (var j = 0; j < cells.length; j++) 52 { 53 //給每一個單元格添加click事件 54 cells[j].onclick=function(){ 55 if (this.style.background=='') { 56 this.style.background='green' 57 }else{ 58 this.style.background='' 59 } 60 } 61 62 } 63 } 64 } 65 tabCell() 66 </script> 67 </body> 68 </html>
四、測試題-簡答題
1、如何動態給元素添加點擊事件？
解答：cells[j].onclick=function(){函數體}。
2、如何動態的獲取元素的背景屬性？
解答：if (this.style.background=='')。
3、table表格的行（rows）屬性和列屬性（或者說單元格屬性cells）的關系？
解答：行包含單元格（cells是rows的屬性），var cells=rows[i].cells; //得到這一行的所有單元格。
4、如何動態的獲取元素？
解答：var tab=document.getElementById('tab')。
5、如何動態從表格中取到某個單元格的dom對象？
解答：通過table的rows屬性，遍歷表格所有行，然后通過cells屬性，找到我們需要的單元格。
6、如何判斷js中某個標簽是否設置了背景色屬性？
解答：獲取標簽對應的dom對象，然后判斷dom對象的style的background屬性是否為空字符串。if (this.style.background=='')。