首页 web前端 html教程 Html+Css+Js_之table每隔3行显示不同的两种颜色_html/css_WEB-ITnose

Html+Css+Js_之table每隔3行显示不同的两种颜色_html/css_WEB-ITnose

Jun 24, 2016 am 11:37 AM

 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>  
登录后复制

上面代码最终的效果为:

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? &lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

&lt; meter&gt;的目的是什么。 元素? &lt; meter&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什么。 元素?

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

HTML5中跨浏览器兼容性的最佳实践是什么?

&lt; datalist&gt;的目的是什么。 元素? &lt; datalist&gt;的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什么。 元素?

&gt; gt;的目的是什么 元素? &gt; gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什么 元素?

See all articles