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

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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