Home >Web Front-end >HTML Tutorial >Html+Css+Js_之table每隔3行显示不同的两种颜色_html/css_WEB-ITnose
Html+Css+Js_之table每隔3行显示不同的两种颜色_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:37:351012browse
1 <html> 2 <head> 3 <script type="text/javascript"> 4 /** 5 最近因项目的需求，有这样的一个问题： 6 一个table显示n条记录，每3行换一次颜色，例如：1，2，3行红色背景，4，5，6行绿色背景，7，8，9行红色背景...以此类推！ 7 */ 8 window.onload=function() { 9 var tbl = document.getElementById("table"); // 先获取table10 var rows = tbl.getElementsByTagName("tr"); // 获取里面的行tr11 for(i=0;i<rows.length;i++) { // 遍历里面的行12 var j = parseInt(i/3); // 以每3行为单位,j为：3次0，3次1，3次2 ... 13 if(j%2==0){ // 再通过取模来设置每隔3行显示不同的两种颜色14 rows[i].style.backgroundColor="#f00";15 }else{16 rows[i].style.backgroundColor="#0f0";17 } 18 } 19 }; 20 </script> 21 </head> 22 <body> 23 <table id="table" border="1" width="500px"> 24 <tr><td>1</td></tr> 25 <tr><td>2</td></tr> 26 <tr><td>3</td></tr> 27 <tr><td>4</td></tr> 28 <tr><td>5</td></tr> 29 <tr><td>6</td></tr> 30 <tr><td>7</td></tr> 31 <tr><td>8</td></tr> 32 <tr><td>9</td></tr> 33 <tr><td>10</td></tr> 34 <tr><td>11</td></tr> 35 <tr><td>12</td></tr> 36 <tr><td>13</td></tr> 37 <tr><td>14</td></tr> 38 <tr><td>15</td></tr> 39 <tr><td>16</td></tr> 40 <tr><td>17</td></tr> 41 <tr><td>18</td></tr> 42 </table> 43 </body> 44 </html> 上面代码最终的效果为：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS样式缩写(感觉这个贴能火哈哈哈)_html/css_WEB-ITnoseNext article：html 加载多个class，有的只加载了一个，有的两个都加载了，为何？_html/css_WEB-ITnose