html中用js实现的表格隔行换色

红太狼 2022-06-08 05:37 365阅读 0赞

写的时候把自己的表

  1. //写的时候把自己的表的table加上id="tbl"
  2. <table id="tbl">

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>表格隔行换色</title>
  6.         <script> window.onload = function(){ //1.获取表格 var tblEle = document.getElementById("tbl"); //2.获取表格中tbody里面的行数(长度) var len = tblEle.tBodies[0].rows.length; //alert(len); //3.对tbody里面的行进行遍历 for(var i=0;i<len;i++){ if(i%2==0){ //4.对偶数行设置背景颜色 tblEle.tBodies[0].rows[i].style.backgroundColor="pink"; }else{ //5.对奇数行设置背景颜色 tblEle.tBodies[0].rows[i].style.backgroundColor="gold"; } } } </script>
  8.     </head>
  9.     <body>
  10.         <table border="1" width="500" height="50" align="center" id="tbl">
  11.             <thead>
  12.                 <tr>
  13.                     <th>编号</th>
  14.                     <th>姓名</th>
  15.                     <th>年龄</th>
  16.                 </tr>
  17.             </thead>
  18.             <tbody>
  19.                 <tr >
  20.                     <td>1</td>
  21.                     <td>张三</td>
  22.                     <td>22</td>
  23.                 </tr>
  24.                 <tr >
  25.                     <td>2</td>
  26.                     <td>李四</td>
  27.                     <td>25</td>
  28.                 </tr>
  29.                 <tr >
  30.                     <td>3</td>
  31.                     <td>王五</td>
  32.                     <td>27</td>
  33.                 </tr>
  34.                 <tr >
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                     <td>29</td>
  38.                 </tr>
  39.                 <tr >
  40.                     <td>5</td>
  41.                     <td>田七</td>
  42.                     <td>30</td>
  43.                 </tr>
  44.                 <tr >
  45.                     <td>6</td>
  46.                     <td>汾九</td>
  47.                     <td>20</td>
  48.                 </tr>
  49.             </tbody>
  50.         </table>
  51.     </body>
  52. </html>

发表评论

表情：
评论列表 （有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读