DOM api里关于表格集合的使用
rows：表示表格所有行的集合
cells：表示行内单元格的集合
效果：
代码：
1 <style> 2 *{ margin:0; padding:0;} 3 #tab td{ 4 padding: 5px 0; 5 line-height: 22px; 6 text-align: center; 7 } 8 </style> 9 10 <table width="500" border="0" cellspacing="0" cellpadding="0" id="tab"> 11 <tr> 12 <td> </td> 13 <td> </td> 14 <td> </td> 15 <td> </td> 16 <td> </td> 17 <td> </td> 18 <td> </td> 19 <td> </td> 20 </tr> 21 <tr> 22 <td> </td> 23 <td> </td> 24 <td> </td> 25 <td> </td> 26 <td> </td> 27 <td> </td> 28 <td> </td> 29 <td> </td> 30 </tr> 31 <tr> 32 <td> </td> 33 <td> </td> 34 <td> </td> 35 <td> </td> 36 <td> </td> 37 <td> </td> 38 <td> </td> 39 <td> </td> 40 </tr> 41 <tr> 42 <td> </td> 43 <td> </td> 44 <td> </td> 45 <td> </td> 46 <td> </td> 47 <td> </td> 48 <td> </td> 49 <td> </td> 50 </tr> 51 <tr> 52 <td> </td> 53 <td> </td> 54 <td> </td> 55 <td> </td> 56 <td> </td> 57 <td> </td> 58 <td> </td> 59 <td> </td> 60 </tr> 61 <tr> 62 <td> </td> 63 <td> </td> 64 <td> </td> 65 <td> </td> 66 <td> </td> 67 <td> </td> 68 <td> </td> 69 <td> </td> 70 </tr> 71 <tr> 72 <td> </td> 73 <td> </td> 74 <td> </td> 75 <td> </td> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 <td> </td> 80 </tr> 81 <tr> 82 <td> </td> 83 <td> </td> 84 <td> </td> 85 <td> </td> 86 <td> </td> 87 <td> </td> 88 <td> </td> 89 <td> </td> 90 </tr> 91 </table> 92 <script> 93 var tab=document.getElementById("tab"); 94 for(var i=0,len=tab.rows.length;i<len;i++){ 95 for(var j=0,jlen=tab.rows[i].cells.length;j<jlen;j++){ 96 tab.rows[i].cells[j].innerHTML="("+i+","+j+")"; 97 tab.rows[i].cells[j].point=[i,j];//没有用闭包的，用自身自定义属性来完成传值 98 tab.rows[i].cells[j].onmouseover=function(){ 99 if(this.point[0]&&this.point[1]){ 100 tab.rows[0].cells[this.point[1]].style.background="#f00"; 101 tab.rows[this.point[0]].cells[0].style.background="#f00"; 102 this.style.background="#ff0"; 103 } 104 } 105 tab.rows[i].cells[j].onmouseout=function(){ 106 if(this.point[0]&&this.point[1]){//如果不是头行，头列 107 tab.rows[0].cells[this.point[1]].style.background=""; 108 tab.rows[this.point[0]].cells[0].style.background=""; 109 this.style.background=""; 110 } 111 } 112 } 113 } 114 115 </script>
使用闭包来保存变量值：（只修改JS代码其它部分相同）
<script> var tab=document.getElementById("tab"); for(var i=0,len=tab.rows.length;i<len;i++){ for(var j=0,jlen=tab.rows[i].cells.length;j<jlen;j++){ tab.rows[i].cells[j].innerHTML="("+i+","+j+")"; //利用闭包产生作用域保存变量的值 (function(row,col){ tab.rows[row].cells[col].onmouseover=function(){ if(row&&col){//row!=0,col!=0 tab.rows[0].cells[col].style.background="#f00"; tab.rows[row].cells[0].style.background="#f00"; this.style.background="#ff0"; } } tab.rows[row].cells[col].onmouseout=function(){ if(row&&col){ tab.rows[0].cells[col].style.background=""; tab.rows[row].cells[0].style.background=""; this.style.background=""; } } })(i,j) } } </script>
结束：
这个效果实现也可以用td的标签集合，然后计算对应单元格对应的行列。这里只是为了运用浏览器提供的表格的集合。