您的位置：首页 > 其它

表格

2015-08-09 15:16 316 查看 


1.表格里面写的时候最好把tbody加上去，因为就算不加，在控制台里面看的时候会发现其实系统自己把它给加进去了。刚刚试了一下，如果不加，也不用tBodies那么弹出来的就是Blue，也就是它把表格的页眉也算进去了。如果我自己不写tBodies但是在alert里面写上，他还是会弹出张三。所以我们自己在写的时候还是把它都写上，免得看起来混乱。tBodies.rows.cells.这三个都是是获取到的数组。cells是每一行里面所有单元格的数组。

2.在给表格设置边框的时候是直接在table后面写border="1"里面的数字越大，边框越粗

3.tHead和tFoot在一个表格里只有一个，在要获取thead里面的元素时还是要rows[].cells[]哪怕只有一行也要把行写上去

4.因为tBodies是一个数组，所以在写的时候一定要把[]加上，要不然会报错

5.这里在处理选中之前的颜色时是用的一个全局变量来保存他之前的颜色。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#tb1{
width: 300px;
}
</style>
</head>
<body>
<table id="tb1" border="4">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>33</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>41</td>
</tr><tr>
<td>4</td>
<td>王四</td>
<td>41</td>
</tr><tr>
<td>5</td>
<td>李三</td>
<td>41</td>
</tr>
</tbody>
</table>
<script>
var oTb = document.getElementById('tb1');
//   alert(oTb.tBodies[0].rows[1].cells[1].innerHTML);
//    alert(oTb.tHead.rows[0].cells[1].innerHTML);
var oldColor = '';
for(var i=0;i<oTb.tBodies[0].rows.length;i++)
{
//        var oldColor =oTb.tBodies[0].rows[i].style.background;自己写在这里一直报错不知道为什么求指导
//        var oldColor = getComputedStyle(oTb.tBodies[0].rows[i]).background;这个用法不太清楚，
oTb.tBodies[0].rows[i].onmouseover = function ()
{
oldColor = this.style.background;
this.style.background = 'green';

};
oTb.tBodies[0].rows[i].onmouseout = function ()
{
this.style.background = oldColor;
};
if(i%2)
{
oTb.tBodies[0].rows[i].style.background = '';
}
else
{
oTb.tBodies[0].rows[i].style.background = '#ccc';
}

}

</script>

</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航