js行颜色间隔显示并高亮

最新推荐文章于 2022-04-14 01:39:32 发布

简单的绿竹

最新推荐文章于 2022-04-14 01:39:32 发布

阅读量819

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/zunguitiancheng/article/details/46651727

版权

JS 专栏收录该内容

122 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=GBK">

       <title>Untitled Document</title>
       <style type="text/css">

            table{
                   border:#249bdb 1px solid;
                   width:500px;
                   border-collapse:collapse;
               }
           table td{
                   border:#249bdb 1px solid;
                   padding:10px;
               }
           table th{
                   border:#249bdb 1px solid;
                   padding:10px;
                   background-color: rgb(200,200,200);
               }

           .one{
               background-color:#e1e16a;
           }
           .two{
               background-color:#75f094;
           }
           .over{
               background-color:#f9360d;
           }
       </style>
       <script type="text/javascript">
           var name;
           function trColor(){
               /*
               * 思路：
               * 1，因为要操作行的样式，所以要先获取表格对象。
               * 2，获取所有被操作的行对象。
               * 3，遍历行并给每一行指定样式。
               */
               var oTabNode = document.getElementById("info");

//               alert(oTabNode);

               //表格中所有的行。
               var collTrNodes = oTabNode.rows;

               //遍历的时候从第二行遍历。
               for(var x=1; x<collTrNodes.length; x++){
                   if(x%2==1){
                       collTrNodes[x].className = "one";
                   }else{
                       collTrNodes[x].className = "two";
                   }
                   // 给每一个行对象都添加两个事件。
                   collTrNodes[x].onmouseover = function(){
                       name = this.className;
                       this.className = "over";
                   }
                   collTrNodes[x].onmouseout = function(){
                       this.className = name;
                   }
               }
           }

           onload = function(){
               trColor();
           }
           /*
           function over(node){

               name = node.className;
               node.className = "over";

           }
           function outa(node){
               node.className = name;
           }
           */
       </script>


   </head>
   <body>

       <table id="info">
           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>地址</th>
           </tr>
           <tr>
               <td>张三</td>
               <td>27</td>
               <td>上海</td>
           </tr>
           <tr>
               <td>小强</td>
               <td>26</td>
               <td>北京</td>
           </tr>
           <tr>
               <td>李四</td>
               <td>29</td>
               <td>广州</td>
           </tr>
           <tr>
               <td>孙八</td>
               <td>23</td>
               <td>南京</td>
           </tr>
           <tr>
               <td>二麻子</td>
               <td>19</td>
               <td>大连</td>
           </tr>
           <tr>
               <td>犀利姐</td>
               <td>32</td>
               <td>青岛</td>
           </tr>
           <tr>
               <td>旺财</td>
               <td>19</td>
               <td>深圳</td>
           </tr>
           <tr>
               <td>周七</td>
               <td>42</td>
               <td>铁岭</td>
           </tr>

       </table>
   </body>
</html>