javascript实现tablel隔行变色
用来练手,需要说的不多
这个例子用了两种方式实现
第一种:直接给每一行绑定事件
缺点:当数据量过大,性能会大打折扣
代码:
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下,当鼠标移入、移出表格后,
会总有一行不恢复原来的背景色
不知道是我代码有问题,还是我人品问题
电脑有问题
希望高人指点
谢谢…………