javascript实现tablel隔行变色

最新推荐文章于 2024-08-09 21:30:00 发布

weixin_30404405

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiao-t/archive/2013/01/03/2843275.html

版权

用来练手，需要说的不多

这个例子用了两种方式实现

第一种：直接给每一行绑定事件

缺点：当数据量过大，性能会大打折扣

代码：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>table隔行变色</title>
  6 </head>
  7 
  8 <body>
  9 <style>
 10  thead tr { background:#06F;}
 11 </style>
 12 <table border="1" id="tableTest">
 13     <thead>
 14         <tr>
 15             <td>表头</td>
 16             <td>表头</td>
 17             <td>表头</td>
 18             <td>表头</td>
 19         </tr>
 20     </thead>
 21     <tbody>
 22         <tr>
 23             <td>单元格</td>
 24             <td>单元格</td>
 25             <td>单元格</td>
 26             <td>单元格</td>
 27         </tr>
 28         <tr>
 29             <td>单元格</td>
 30             <td>单元格</td>
 31             <td>单元格</td>
 32             <td>单元格</td>
 33         </tr>
 34         <tr>
 35             <td>单元格</td>
 36             <td>单元格</td>
 37             <td>单元格</td>
 38             <td>单元格</td>
 39         </tr>
 40         <tr>
 41             <td>单元格</td>
 42             <td>单元格</td>
 43             <td>单元格</td>
 44             <td>单元格</td>
 45         </tr>
 46         <tr>
 47             <td>单元格</td>
 48             <td>单元格</td>
 49             <td>单元格</td>
 50             <td>单元格</td>
 51         </tr>
 52         <tr>
 53             <td>单元格</td>
 54             <td>单元格</td>
 55             <td>单元格</td>
 56             <td>单元格</td>
 57         </tr>
 58         <tr>
 59             <td>单元格</td>
 60             <td>单元格</td>
 61             <td>单元格</td>
 62             <td>单元格</td>
 63         </tr>
 64         <tr>
 65             <td>单元格</td>
 66             <td>单元格</td>
 67             <td>单元格</td>
 68             <td>单元格</td>
 69         </tr>
 70         <tr>
 71             <td>单元格</td>
 72             <td>单元格</td>
 73             <td>单元格</td>
 74             <td>单元格</td>
 75         </tr>
 76         <tr>
 77             <td>单元格</td>
 78             <td>单元格</td>
 79             <td>单元格</td>
 80             <td>单元格</td>
 81         </tr>
 82         <tr>
 83             <td>单元格</td>
 84             <td>单元格</td>
 85             <td>单元格</td>
 86             <td>单元格</td>
 87         </tr>
 88         <tr>
 89             <td>单元格</td>
 90             <td>单元格</td>
 91             <td>单元格</td>
 92             <td>单元格</td>
 93         </tr>
 94 
 95     </tbody>
 96 </table>
 97 <script>
 98     window.onload = function () {
 99         var oTable = document.getElementById('tableTest');
100         var aRows = oTable.tBodies[0].rows;
101         var bgColor ;//用来保存当前行的背景色
102          
103         for (var i = 0; i<aRows.length; i++) {
104             if (i%2 == 0) {
105                 aRows[i].style.backgroundColor = '#ccc';
106                 } else {aRows[i].style.backgroundColor = '#666';}
107             aRows[i].onmouseover = function (){
108                 bgColor = this.style.backgroundColor;
109                 this.style.backgroundColor = '#09f';
110                 }
111             aRows[i].onmouseout = function (){
112                 this.style.backgroundColor = bgColor;
113                 }
114             aRows[i].onclick = function (){
115                 /*for (var j = 0; j<aRows.length; j++){
116                     aRows[j].style.backgroundColor = bgColor;
117                     }*/
118                 this.style.backgroundColor = '#09f';
119                 this.onmouseout = null;
120                 }
121             }
122         }
123 </script>
124 </body>
125 </html>

第二种：利用事件委托的方式实现

这样对性能会有不错的提高

这个方法也是大家鼓励用的

代码：

  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>table隔行变色--事件委托</title>
  6 </head>
  7 
  8 <body>
  9 <style>
 10  thead tr { background:#06F;}
 11 </style>
 12 <table border="1" id="tableTest">
 13     <thead>
 14         <tr>
 15             <td>表头</td>
 16             <td>表头</td>
 17             <td>表头</td>
 18             <td>表头</td>
 19         </tr>
 20     </thead>
 21     <tbody>
 22         <tr>
 23             <td>单元格</td>
 24             <td>单元格</td>
 25             <td>单元格</td>
 26             <td>单元格</td>
 27         </tr>
 28         <tr>
 29             <td>单元格</td>
 30             <td>单元格</td>
 31             <td>单元格</td>
 32             <td>单元格</td>
 33         </tr>
 34         <tr>
 35             <td>单元格</td>
 36             <td>单元格</td>
 37             <td>单元格</td>
 38             <td>单元格</td>
 39         </tr>
 40         <tr>
 41             <td>单元格</td>
 42             <td>单元格</td>
 43             <td>单元格</td>
 44             <td>单元格</td>
 45         </tr>
 46         <tr>
 47             <td>单元格</td>
 48             <td>单元格</td>
 49             <td>单元格</td>
 50             <td>单元格</td>
 51         </tr>
 52         <tr>
 53             <td>单元格</td>
 54             <td>单元格</td>
 55             <td>单元格</td>
 56             <td>单元格</td>
 57         </tr>
 58         <tr>
 59             <td>单元格</td>
 60             <td>单元格</td>
 61             <td>单元格</td>
 62             <td>单元格</td>
 63         </tr>
 64         <tr>
 65             <td>单元格</td>
 66             <td>单元格</td>
 67             <td>单元格</td>
 68             <td>单元格</td>
 69         </tr>
 70         <tr>
 71             <td>单元格</td>
 72             <td>单元格</td>
 73             <td>单元格</td>
 74             <td>单元格</td>
 75         </tr>
 76         <tr>
 77             <td>单元格</td>
 78             <td>单元格</td>
 79             <td>单元格</td>
 80             <td>单元格</td>
 81         </tr>
 82         <tr>
 83             <td>单元格</td>
 84             <td>单元格</td>
 85             <td>单元格</td>
 86             <td>单元格</td>
 87         </tr>
 88         <tr>
 89             <td>单元格</td>
 90             <td>单元格</td>
 91             <td>单元格</td>
 92             <td>单元格</td>
 93         </tr>
 94 
 95     </tbody>
 96 </table>
 97 <script>
 98     window.onload = function () {
 99         var oTable = document.getElementById('tableTest');
100         var oTbody = oTable.tBodies[0];
101         var aRows = oTable.tBodies[0].rows;
102         var bgColor ;//用来保存当前行的背景色
103          
104         
105         
106         for (var i = 0; i<aRows.length; i++) {
107             if (i%2 == 0) {
108                 aRows[i].style.backgroundColor = '#ccc';
109                 } else {aRows[i].style.backgroundColor = '#666';}
110             }
111         //事件委托方法
112         oTbody.onmouseover = function (e){
113             var event = e||window.event;
114             var target = event.target || event.srcElement;
115             if (target.parentNode.tagName == 'TR') {
116                 bgColor = target.parentNode.style.backgroundColor;
117                 target.parentNode.style.backgroundColor = '#09f';
118                 }
119             }
120         oTbody.onmouseout = function (e){
121             var event = e||window.event;
122             var target = event.target || event.srcElement;
123             if (target.parentNode.tagName == 'TR') {
124                 target.parentNode.style.backgroundColor = bgColor;
125                 }
126             }
127         
128         }
129 </script>
130 </body>
131 </html>

在这有个问题：

这个例子通过我测试在IE8下，当鼠标移入、移出表格后，

会总有一行不恢复原来的背景色

不知道是我代码有问题，还是我人品问题

电脑有问题

希望高人指点

谢谢…………

转载于:https://www.cnblogs.com/xiao-t/archive/2013/01/03/2843275.html

weixin_30404405

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现tablel隔行变色

用来练手，需要说的不多这个例子用了两种方式实现第一种：直接给每一行绑定事件缺点：当数据量过大，性能会大打折扣代码： 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>table隔行变色</...
复制链接

扫一扫