526互联

css或js实现隔行换色

发布时间 2023-08-30 21:50:42作者: 饼MIN
        /* 用CSS实现隔行换色*/
        /* table tbody tr:nth-child(odd) {
            background-color: #c7cac9;
        }

        table tbody tr:nth-child(even) {
            background-color: #ccc;
        } */

      //用JS 实现隔行换色
   function fn() {
       //获取tbody里面的所有内容,对tbody里面的内容隔行换色
         var trs = document.querySelectorAll("tbody>tr")
       //进行隔行换色
         for (var i = 0; i < trs.length; i++) {
              if (i % 2 == 0) {
                  trs[i].style.backgroundColor = "#c7cac9"
              }else{
                  trs[i].style.backgroundColor = "#ccc"  
              }
         }
   }