隔行变色及其扩展
Posted think的海角
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了隔行变色及其扩展相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 8 <body> 9 <table id="tb1"> 10 <tr><td>1</td></tr> 11 <tr><td>2</td></tr> 12 <tr><td>3</td></tr> 13 <tr><td>4</td></tr> 14 <tr><td>5</td></tr> 15 <tr><td>6</td></tr> 16 <tr><td>7</td></tr> 17 <tr><td>8</td></tr> 18 <tr><td>9</td></tr> 19 <tr><td>10</td></tr> 20 </table> 21 </body> 22 <script type="text/javascript"> 23 window.onload = function(){ 24 var tb1 = document.getElementById("tb1"); 25 var rows = tb1.getElementsByTagName("tr"); 26 for(var i = 0; i < rows.length; i++){ 27 if (i % 2 == 1){ 28 rows[i].style.backgroundColor="#f00"; 29 }else{ 30 rows[i].style.backgroundColor="#0f0"; 31 } 32 } 33 34 //extendChangeColor(3); 35 } 36 37 //隔行变色的扩展，每隔n行进行变色 38 function extendChangeColor(n){ 39 var tb1 = document.getElementById("tb1"); 40 var rows = tb1.getElementsByTagName("tr"); 41 42 for(var i = 0; i < rows.length; i++){ 43 var j = parseInt(i/n);//这里必须取整一下 44 if (j % 2 == 0){ 45 rows[i].style.backgroundColor="#0f0"; 46 }else{ 47 rows[i].style.backgroundColor="#f00"; 48 } 49 } 50 } 51 </script> 52 </html>
以上是关于隔行变色及其扩展的主要内容，如果未能解决你的问题，请参考以下文章