js之实现表格高亮显示

最新推荐文章于 2024-01-23 06:00:00 发布

星耀yao

最新推荐文章于 2024-01-23 06:00:00 发布

阅读量577

点赞数

分类专栏： java javascript 表格

本文链接：https://blog.csdn.net/chen_xingyao/article/details/79328337

版权

java 同时被 3 个专栏收录

27 篇文章 1 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

表格

2 篇文章 0 订阅

订阅专栏

步骤：
第一步：确定事件(onmouseover和onmouseout)并分别为其绑定一个函数
第二步：获取鼠标移上去的那行，对其设置背景颜色

js代码：

<script type="text/javascript">

                function changeColor(id,flag){
                    if(flag == "over"){
                        document.getElementById(id).style.backgroundColor = "red";
                    }else if(flag == 'out'){
                        document.getElementById(id).style.backgroundColor = "white";
                    }
                }

        </script>

html代码：

<table border="1" width="500" height="50" align="center" cellspacing="0" id="tal">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr id="tr1" onmouseover="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                </tr>
                <tr id="tr2" onmouseover="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')">
                    <td>2</td>
                    <td>李四</td>
                    <td>24</td>
                </tr>
                <tr id="tr3" onmouseover="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')">
                    <td>3</td>
                    <td>王五</td>
                    <td>25</td>
                </tr>
                <tr id="tr4" onmouseover="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')">
                    <td>4</td>
                    <td>赵六</td>
                    <td>26</td>
                </tr>
                <tr id="tr5" onmouseover="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')">
                    <td>5</td>
                    <td>田七</td>
                    <td>27</td>
                </tr>
            </tbody>
        </table>