javascript -表格集合rows cells运用

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>&nbsp;</td>
 13     <td>&nbsp;</td>
 14     <td>&nbsp;</td>
 15     <td>&nbsp;</td>
 16     <td>&nbsp;</td>
 17     <td>&nbsp;</td>
 18     <td>&nbsp;</td>
 19     <td>&nbsp;</td>
 20   </tr>
 21   <tr>
 22     <td>&nbsp;</td>
 23     <td>&nbsp;</td>
 24     <td>&nbsp;</td>
 25     <td>&nbsp;</td>
 26     <td>&nbsp;</td>
 27     <td>&nbsp;</td>
 28     <td>&nbsp;</td>
 29     <td>&nbsp;</td>
 30   </tr>
 31   <tr>
 32     <td>&nbsp;</td>
 33     <td>&nbsp;</td>
 34     <td>&nbsp;</td>
 35     <td>&nbsp;</td>
 36     <td>&nbsp;</td>
 37     <td>&nbsp;</td>
 38     <td>&nbsp;</td>
 39     <td>&nbsp;</td>
 40   </tr>
 41   <tr>
 42     <td>&nbsp;</td>
 43     <td>&nbsp;</td>
 44     <td>&nbsp;</td>
 45     <td>&nbsp;</td>
 46     <td>&nbsp;</td>
 47     <td>&nbsp;</td>
 48     <td>&nbsp;</td>
 49     <td>&nbsp;</td>
 50   </tr>
 51   <tr>
 52     <td>&nbsp;</td>
 53     <td>&nbsp;</td>
 54     <td>&nbsp;</td>
 55     <td>&nbsp;</td>
 56     <td>&nbsp;</td>
 57     <td>&nbsp;</td>
 58     <td>&nbsp;</td>
 59     <td>&nbsp;</td>
 60   </tr>
 61   <tr>
 62     <td>&nbsp;</td>
 63     <td>&nbsp;</td>
 64     <td>&nbsp;</td>
 65     <td>&nbsp;</td>
 66     <td>&nbsp;</td>
 67     <td>&nbsp;</td>
 68     <td>&nbsp;</td>
 69     <td>&nbsp;</td>
 70   </tr>
 71   <tr>
 72     <td>&nbsp;</td>
 73     <td>&nbsp;</td>
 74     <td>&nbsp;</td>
 75     <td>&nbsp;</td>
 76     <td>&nbsp;</td>
 77     <td>&nbsp;</td>
 78     <td>&nbsp;</td>
 79     <td>&nbsp;</td>
 80   </tr>
 81   <tr>
 82     <td>&nbsp;</td>
 83     <td>&nbsp;</td>
 84     <td>&nbsp;</td>
 85     <td>&nbsp;</td>
 86     <td>&nbsp;</td>
 87     <td>&nbsp;</td>
 88     <td>&nbsp;</td>
 89     <td>&nbsp;</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的标签集合，然后计算对应单元格对应的行列。这里只是为了运用浏览器提供的表格的集合。

 

posted @ 2013-05-14 13:56  脚后跟着猫  阅读(2241)  评论(0)  编辑  收藏  举报
返回
顶部