JS实现表格高亮显示

最新推荐文章于 2020-10-19 15:07:38 发布

今晚打胖胖

最新推荐文章于 2020-10-19 15:07:38 发布

阅读量1.5k

点赞数

分类专栏： js javaScript java自学 java 文章标签： javaScript js

本文链接：https://blog.youkuaiyun.com/qq_42843730/article/details/82415374

版权

java 同时被 3 个专栏收录

14 篇文章

订阅专栏

java自学

11 篇文章

订阅专栏

javaScript

3 篇文章

订阅专栏

本文介绍了使用JavaScript实现表格的高亮显示功能，包括各行自动换色和鼠标悬停高亮两种方式。作者强调了对错误的反馈和自我学习的重要性，并预告了未来将分享更多自学方法和Java知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：本文内容为表格高亮显示功能，分为两种，第一种各行换色。第二种鼠标移动到对应行，高亮显示

各行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
       <script>
         window.onload=function(){
            var tabs= document.getElementById("tabl");
            var len= tabs.tBodies[0].rows.length;
            for (var i=0;i<len;i++) {
                if(i%2==0){
                tabs.tBodies[0].rows[i].style.backgroundColor="yellow";
                }
            }
         }
       </script>
    </head>
    <body>
        <table id="tabl" border="1px" width="500px" height="60px" cellpadding="1px" align="center" id="tabl">
            <thead>
            <tr align="center">
                <th>
                    <font size="3">编号</font>
                </th>
                <th>
                    <font size="3">姓名</font>
                </th>
                <th>
                    <font size="3">年龄</font>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    01
                </td>
                <td>
                    张三
                </td>
                <td>
                    员工
                </td>
            </tr>
            <tr>
                <td>
                    02
                </td>
                <td>
                王五  
                </td>
                <td>
                    员工
                </td>
            </tr>           
            <tr>
                <td>
                    03
                </td>
                <td>
                    李小二
                </td>
                    <td>
                    电影
                </td>
            </tr>           
            <tr>
                <td>
                    04
                </td>
                <td>
                王麻子 
                </td>
                <td>
                视频  
                </td>
            </tr>           
            <tr>
                <td>
                    06
                </td>
                <td>
                    二狗子
                </td>
                    <td>
                    狗屎
                </td>
            </tr>           
            <tr>
                <td>
                    07
                </td>
                <td>
                小儿  
                </td>
                <td>
                老板  
                </td>
            </tr>
            </tbody>
        </table>
    </body>
</html>

鼠标移动高亮显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色</title>
        <script>
        //基础模型
/*        function mouseover(){
            document.getElementById("tab1").style.backgroundColor="red";
        }
        function mouseout(){
            document.getElementById("tab1").style.backgroundColor="white";
        }*/
        function changeColor(id,flag)
        {
            if(flag=="over")
            {
                document.getElementById(id).style.backgroundColor="yellow";
            }
            else{
                document.getElementById(id).style.backgroundColor="white";
            }
        }
        </script>
    </head>
    <body>
        <table border="1" width="500" height="50" align="center" >
            <tr >
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr onmouseover="mouseover()" onmouseout="mouseout()" id="tab1">
                <td>1</td>
                <td>张三</td>
                <td>22</td>
            </tr>
            <tr onmouseover="changeColor('tab2','over')" onmouseout="changeColor('tab2','out')" id="tab2">
                <td>2</td>
                <td>李四</td>
                <td>25</td>
            </tr >
            <tr  onmouseover="changeColor('tab3','over')" onmouseout="changeColor('tab3','out')" id="tab3">
                <td>3</td>
                <td>王五</td>
                <td>27</td>
            </tr>
            <tr  onmouseover="changeColor('tab4','over')" onmouseout="changeColor('tab4','out')" id="tab4">
                <td>4</td>
                <td>赵六</td>
                <td>29</td>
            </tr>
            <tr  onmouseover="changeColor('tab5','over')" onmouseout="changeColor('tab5','out')" id="tab5">
                <td>5</td>
                <td>田七</td>
                <td>30</td>
            </tr>
            <tr  onmouseover="changeColor('tab6','over')" onmouseout="changeColor('tab6','out')" id="tab6">
                <td>6</td>
                <td>汾九</td>
                <td>20</td>
            </tr>
        </table>
    </body>
</html>