js之实现表格高亮显示

谁借莪１个温暖的怀抱￠ 2022-05-31 08:53 201阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 141 阅读

相关 [转]JS,HTML高亮显示

[http://tool.92798.net/more/codelight\_js.html][http_tool.92798.net_more_codelight_js.ht

妖狐艹你老母/ 2022年09月19日 10:47/ 0 赞/ 102 阅读

相关 js实现空心正方形边框循环高亮显示

效果图 ![效果图][SouthEast] -------------------- <body> <div id="root"></div>

傷城~/ 2022年06月17日 08:11/ 0 赞/ 142 阅读

相关 js之实现表格高亮显示

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

谁借莪１个温暖的怀抱￠/ 2022年05月31日 08:53/ 0 赞/ 202 阅读

相关 js实现高亮显示鼠标所在行

行： <tr id="data_${stat.index}" class="main_trbg" align="center"> Js: / 给数据行绑定

痛定思痛。/ 2022年05月23日 21:18/ 0 赞/ 119 阅读

相关 Eclipse 高亮显示

Eclipce选中一个变量时，所以引用和声明变量的地方都会高亮代码显示，很方便，但有时没这个功能了。。采取如下操作： Toggle Mark Occurrences(Al

Bertha 。/ 2022年05月16日 10:52/ 0 赞/ 225 阅读

相关 table表格列随鼠标高亮显示

前言在表格开发中，有时因为表格列数较多，需要表格的列随着鼠标的移动高亮显示，方便查看，如下图（配合行高亮显示）![在这里插入图片描述][watermark_type_Z

怼烎@/ 2022年04月17日 07:15/ 0 赞/ 424 阅读

相关 js实现关键字高亮

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>j

约定不等于承诺〃/ 2021年12月22日 06:11/ 0 赞/ 340 阅读

相关 Solr之高亮显示设置

下面来记录并分享下solr高亮显示相关设置： 1、SolrQuery类，此类方法setHighlight(true)，当设置为true时，表示开启了高亮。 2、SolrQu

本是古典何须时尚/ 2021年09月29日 03:46/ 0 赞/ 561 阅读

相关 js实现关键字匹配高亮显示

需求：用户输入文字之后，调用后台接口查询匹配关键字（模糊搜索），并把匹配到的关键字进行高亮显示。实现思路：将拿到的数据进行拆分，例如：用户输入“羽毛球“，接口返回数据...

你的名字/ 2021年01月19日 17:30/ 0 赞/ 996 阅读