DOM-表格行颜色间隔显示并高亮

来源：互联网发布：青岛seo外包公司编辑：程序博客网时间：2024/05/21 19:31

web-strom开发

1.表格行颜色间隔显示并高亮

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" type="text/css" href="table.css">    <title></title>    <style type="text/css">        .one{            background-color: #e1e163;        }        .two{            background-color: #75f094        }        .over{            background-color: red;        }    </style>    <script>        var name;        function trColor(){            /*先获取表格对象            获取所有被操作行对象            遍历并给每行样式            * */            var oTabNode=document.getElementById("info");            //表格所有行            var collTrNode=oTabNode.rows;            //遍历从第二行开始            for(var i=0;i<collTrNode.length;i++){                if(i%2==1){                    collTrNode[i].className="one";                }else{                    collTrNode[i].className="two";                }                //给每一个行对象都添加两个事件                collTrNode[i].onmouseover=function(){                    name=this.className;                    this.className="over";                }                collTrNode[i].onmouseout=function(){                    this.className=name;                }            }         }        onload=function(){            trColor();        }    </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>24</td>            <td>重庆</td>        </tr>        <tr>            <td>王二</td>            <td>32</td>            <td>成都</td>        </tr>        <tr>            <td>小强</td>            <td>25</td>            <td>北京</td>        </tr>        <tr>        <td>李白</td>        <td>18</td>        <td>成都</td>        </tr>        <tr>            <td>赵云</td>            <td>22</td>            <td>武汉</td>        </tr>        <tr>            <td>曹操</td>            <td>38</td>            <td>青岛</td>        </tr>        <tr>            <td>诸葛</td>            <td>40</td>            <td>南京</td>        </tr>    </table></body></html>

2.代码中引用的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);}

0 0