js实现表格隔行换色

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .table-wrapper {
  10.             width: 500px;
  11.             margin: auto auto;
  12.         }
  13.         table{
  14.             width: 500px;
  15.             height: 500px;
  16.             text-align: center;
  17.         }
  18.         /* 奇数行 */
  19.         .odd{
  20.             background-color: pink;
  21.         }
  22.         /* 偶数行 */
  23.         .even{
  24.             background-color: royalblue;
  25.         }
  26.         .odd-high-light{
  27.             background-color: yellow;
  28.         }
  29.         .even-high-light{
  30.             background-color: white;
  31.         }
  32.     </style>
  33. </head>
  35. <body>
  36.     <div class="table-wrapper">
  38.     </div>
  39.     <script>
  40.         // 页面加载完毕后执行函数
  41.         window.onload = function () {
  42.             let users=[
  43.                 {
  44.                     id:1,
  45.                     name:"Lynn",
  46.                     age:18
  47.                 },
  48.                 {
  49.                     id:2,
  50.                     name:"Lynn",
  51.                     age:18
  52.                 },
  53.                 {
  54.                     id:3,
  55.                     name:"Lynn",
  56.                     age:18
  57.                 },
  58.                 {
  59.                     id:4,
  60.                     name:"Lynn",
  61.                     age:18
  62.                 }
  63.             ]
  64.             //使用js创建表格
  65.             let wrapper = document.querySelector('.table-wrapper');
  66.             let innerHTML = '<table>';
  68.             innerHTML += '<thead>';
  69.             innerHTML += '<tr><th>序号</th><th>姓名</th><th>年龄</th></tr>';
  70.             innerHTML += '</thead>';
  72.             innerHTML += '<tbody>';
  73.                 for(let user of users){
  74.                     innerHTML += '<tr>';
  75.                     innerHTML += '<td>'+user.id+'</td>';
  76.                     innerHTML += '<td>'+user.name+'</td>';
  77.                     innerHTML += '<td>'+user.age+'</td>';
  78.                     innerHTML += '</tr>';
  79.                 }
  80.             innerHTML += '</tbody>';
  82.             innerHTML += '</table>';
  84.             wrapper.innerHTML=innerHTML;//页面已经更新了
  86.             // 通过js设置行的背景色
  87.             let rows=wrapper.querySelectorAll('tbody tr');
  88.             //通过style设置样式
  89.             /* for(let index in rows){
  90.                 if(index%2==0){
  91.                     rows[index].style.backgroundColor='pink';
  92.                 }else{
  93.                     rows[index].style.backgroundColor='green';
  94.                 }
  95.             } */
  97.             //通过class设置样式
  98.             for(let index in rows){
  99.                 if(index%2==0){
  100.                     // className：有多个名字会覆盖样式
  101.                     // classList：不会覆盖
  102.                     rows[index].classList.add('odd');
  104.                     rows[index].onmouseover=function(){
  105.                     // console.log(this);//this表示当前行
  106.                     this.classList.add('odd-high-light');
  107.                     }   
  108.                     rows[index].onmouseout=function(){
  109.                         // console.log(this);//this表示当前行
  110.                         this.classList.remove('odd-high-light');
  111.                     }
  113.                 }else{
  114.                     rows[index].className='even';
  116.                     rows[index].onmouseover=function(){
  117.                     // console.log(this);//this表示当前行
  118.                     this.classList.add('even-high-light');
  119.                     }
  120.                     rows[index].onmouseout=function(){
  121.                         // console.log(this);//this表示当前行
  122.                         this.classList.remove('even-high-light');
  123.                     }
  124.                 }
  125.                 /* // 高亮，鼠标在上面添加高亮样式，鼠标移开删除高亮样式
  126.                 rows[index].onmouseover=function(){
  127.                     // console.log(this);//this表示当前行
  128.                     this.classList.add('odd-high-light');
  129.                 }
  130.                 rows[index].onmouseout=function(){
  131.                     // console.log(this);//this表示当前行
  132.                     this.classList.remove('odd-high-light');
  133.                 } */
  134.             }
  135.         }
  136.     </script>
  137. </body>
  139. </html>