您的位置：首页 > Web前端 > JavaScript

table显示n条记录，每三行换一次颜色，即1,2,3用红色字体，4,5,6用绿色字体，7,8,9用红色字体

2017-10-10 18:25 344 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
window.onload=function() {
var tbl = document.getElementById("tbl");      //首先获取表格
var rows = tbl.getElementsByTagName("tr");     //获取行
for(i=0;i<rows.length;i++) {                   //进行循环操作，最终值小于tr的行数
var j = parseInt(i/3); // 此语句的效果是,以3个为单位,000 111 222 333 444 ...
if(j%2==0) rows[i].style.backgroundColor="#f00";     //如果是偶数则为红色
else  rows[i].style.backgroundColor="#0f0";  	//如果是奇数则为绿色
}
};
</script>
</head>
<body>
<table id="tbl" border="1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
</table>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                循环
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航