首页 > 代码库 > html table单双行颜色间隔（转载）
html table单双行颜色间隔（转载）
直接上代码：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb3212"> 4 <title>单双行显示不同颜色</title> 5 <script type="text/javascript"> 6 window.onload = function color(){ 7 var table = document.getElementById("person"); 8 var rows = table.getElementsByTagName("tr"); 9 for(var i=0;i<rows.length;i++){10 if (i%2==0){11 rows[i].style.backgroundColor = "#EAF2D3"12 }else{13 rows[i].style.backgroundColor = "White";14 }15 }16 }17 </script>18 <style type = "text/css">19 #person20 {21 border-style:1px solid;22 border-color:blue;23 font-weight:bold;24 font-family:楷体,Arial,Helvetica, sans-serif;25 border-collapse:collapse;26 margin:auto;27 }28 #person th29 {30 border:1px solid;31 padding:3px 7px 2px 7px32 background-color:#A7C94233 color:#ffffff34 text-align:center;35 }36 #person td37 {38 border-style:solid;39 border-width:1px;40 text-align:center;41 }42 </style>43 </head>44 <body>45 <table id="person" align="center" width = "90%" height="200">46 <tr>47 <th>姓名</th>48 <th>性别</th>49 <th>电话</th>50 <th>爱好</th>51 </tr>52 <tr>53 <td>zhangsan</td>54 <td>male</td>55 <td>123456</td>56 <td>swimming</td>57 </tr>58 <tr>59 <td>zhangsan</td>60 <td>male</td>61 <td>123456</td>62 <td>swimming</td>63 </tr>64 <tr>65 <td>zhangsan</td>66 <td>male</td>67 <td>123456</td>68 <td>swimming</td>69 </tr> 70 </table>71 </body>72 </html>
html table单双行颜色间隔（转载）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。