原js的隔行变色

最新推荐文章于 2021-12-30 21:52:00 发布

忙着写BUG

最新推荐文章于 2021-12-30 21:52:00 发布

阅读量256

点赞数

本文链接：https://blog.csdn.net/MincingMachine/article/details/78741208

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           *{
               margin: 0px auto;
               padding: 0px;
           }
           #top{
               width: 550px;
               height: 300px;
           }
           #top tr{
               text-align: center;
           }
           #top tr td{
               border: solid black 1px;
           }
       </style>
   </head>
   <body>
       <table id="top">
           <tbody>
           <tr><td>姓名</td><td>年龄</td><td>性别</td></tr>
           <tr><td>小明</td><td>11</td><td>男</td></tr>
           <tr><td>小红</td><td>99</td><td>女</td></tr>
           <tr><td>小蓝</td><td>25</td><td>男</td></tr>
           <tr><td>小花</td><td>18</td><td>女</td></tr>
           </tbody>
       </table>
   </body>
   <script type="text/javascript">
       window.οnlοad=function(){
           var to = document.getElementById("top");
           var tbo = to.getElementsByTagName("tbody")[0];
           var trs = tbo.getElementsByTagName("tr");
           /*var tds = trs.getElementsByName("td");*/
           for (var i = 0; i < trs.length; i++) {
                var tds = trs[i].getElementsByTagName("td");
               if(i%2==0){
                  for (var j = 0; j < tds.length; j++) {
                       tds[j].style.border="solid red 1px";
                }
               }
           }
        }

   </script>

</html>