实现鼠标移动表格行上，此行背景变色研究

最新推荐文章于 2024-08-01 09:39:12 发布
最新推荐文章于 2024-08-01 09:39:12 发布
阅读量4.4k 收藏
点赞数 1
分类专栏： .NET与JavaScript 文章标签： function border jquery fun table class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aspnet2002web/article/details/6024447
版权

当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：


一、利用样式CSS表达式

在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。

完整代码如下：

<html>

<head>

    <title>在样式里写表达式expression，实现鼠标经过表格行上变色</title>

    <style type="text/css">

        .tbDatalist

        {

            border: 1px solid #007108;

            width: 60%;

            border-collapse: collapse; /* 边框重叠,cell间没有空隙 */

            background-color: #d9ffdc;

        }

        .tbDatalist th

        {

            border: 1px solid #007108;

            background-color: #00a40c;

            color: #ffffff;

            font-weight: bold;

            padding: 4px 12px 4px 12px; /* 上 右下左 */

            text-align: center;

        }

        .tbDatalist td

        {

            border: 1px solid #007108;

            text-align: left;

            padding: 4px 10px 4px 10px /* 上 右下左 */;

           

            /* 如果去掉tbDatalist tr里的代码，而增加下面的代码。则实现鼠标经过单元格上，此单元格变色

            onmouseover:expression(οnmοuseοver=function(){this.style.backgroundColor='orange'});

            onmouseout:expression(οnmοuseοut=function(){this.style.backgroundColor='#d9ffdc'});

            */

        }

        .tbDatalist tr

        {

            onmouseover:expression(οnmοuseοver=function(){this.style.backgroundColor='#a5e5aa'});

            onmouseout:expression(οnmοuseοut=function(){this.style.backgroundColor='#d9ffdc'});

        }

    </style>

</head>

<body>

    <table class="tbDatalist" summary="list of members in EE Studay" id="oTable">

        <tr>

            <th scope="col">姓名</th>

            <th scope="col">班级</th>

            <th scope="col">出生日期</th>

            <th scope="col">星座</th>

            <th scope="col">电话</th>

        </tr>

        <tr>

            <td>slepox</td>

            <td> W19</td>

            <td>Nov 18th</td>

            <td>Scorpio</td>

            <td>0658635</td>

        </tr>

        <tr>

            <td>smartlau</td>

            <td>W19</td>

            <td>Dec 30th</td>

            <td>Capricorn</td>

            <td>0006621</td>

        </tr>

        <tr>

            <td>linear</td>

            <td>W86</td>

            <td>Aug 18th</td>

            <td>Leo</td>

            <td>6398341</td>

        </tr>

        <tr>

            <td>laopiao</td>

            <td>W41</td>

            <td>May 17th</td>

            <td>Taurus</td>

            <td>1254004</td>

        </tr>

        <tr>

            <td>dovecho</td>

            <td>W19</td>

            <td>Dec 9th</td>

            <td>Sagittarius</td>

            <td>1892013</td>

        </tr>

    </table>

</body>

</html>

 


二、利用jquery的hover(fun,fun)方法

利用jquery的hover(fun,fun)方法，实现鼠标经过表格行上变色，hover()方法有两个参数，第一个参数为鼠标移到某行上要执行的方法，相当于onmouseover()，第2个事参数是鼠标离开某行后要执行的方法，相当于onmouseout()。

完整代码如下：（jquery-1.4.1-vsdoc.js）为VS.NET2010自带的JQuery包

<html>

<head>

    <title>利用jquery的hover(fun,fun)方法，实现鼠标经过表格行上变色</title>

    <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <style type="text/css">

        .tbDatalist

        {

            border: 1px solid #007108;

            width: 60%;

            border-collapse: collapse; /* 边框重叠,cell间没有空隙 */

            background-color: #d9ffdc;

        }

        .tbDatalist th

        {

            border: 1px solid #007108;

            background-color: #00a40c;

            color: #ffffff;

            font-weight: bold;

            padding: 4px 12px 4px 12px; /* 上 右下左 */

            text-align: center;

        }

        .tbDatalist td

        {

            border: 1px solid #007108;

            text-align: left;

            padding: 4px 10px 4px 10px /* 上 右下左 */;

        }

        .tbDatalist tr.altrow

        {

            background-color: #a5e5aa;

        }

    </style>

    <script type="text/javascript">

        $(document).ready(function() {

            $("tr").hover(

                function() {

                    $(this).css("background", "#a5e5aa");   //鼠标移动上去的颜色

                },

               

                function() {

                    $(this).css("background", "#d9ffdc");   //鼠标离开的颜色

                }

            );

        });

    </script>

</head>

<body>

    <table class="tbDatalist" summary="list of members in EE Studay" id="oTable">

        <tr>

            <th scope="col">姓名</th>

            <th scope="col">班级</th>

            <th scope="col">出生日期</th>

            <th scope="col">星座</th>

            <th scope="col">电话</th>

        </tr>

        <tr>

            <td>slepox</td>

            <td> W19</td>

            <td>Nov 18th</td>

            <td>Scorpio</td>

            <td>0658635</td>

        </tr>

        <tr>

            <td>smartlau</td>

            <td>W19</td>

            <td>Dec 30th</td>

            <td>Capricorn</td>

            <td>0006621</td>

        </tr>

        <tr>

            <td>linear</td>

            <td>W86</td>

            <td>Aug 18th</td>

            <td>Leo</td>

            <td>6398341</td>

        </tr>

        <tr>

            <td>laopiao</td>

            <td>W41</td>

            <td>May 17th</td>

            <td>Taurus</td>

            <td>1254004</td>

        </tr>

        <tr>

            <td>dovecho</td>

            <td>W19</td>

            <td>Dec 9th</td>

            <td>Sagittarius</td>

            <td>1892013</td>

        </tr>

    </table>

</body>

</html>

 


三、利用JS的onmouseover()方法和onmouseout()方法

利用JS的onmouseover()方法和onmouseout()方法，实现鼠标移动表格行上变色。

完整代码如下：

<html>

<head>

    <title>利用JS，实现鼠标移动表格行上变色</title>

        <style type="text/css">

        .tbDatalist

        {

            border: 1px solid #007108;

            width: 500;

            border-collapse: collapse; /* 边框重叠,cell间没有空隙 */

            background-color: #d9ffdc;

        }

        .tbDatalist th

        {

            border: 1px solid #007108;

            background-color: #00a40c;

            color: #ffffff;

            font-weight: bold;

            padding: 4px 12px 4px 12px; /* 上 右下左 */

            text-align: center;

        }

        .tbDatalist td

        {

            border: 1px solid #007108;

            text-align: left;

            padding: 4px 10px 4px 10px /* 上 右下左 */;

        }

 

    </style>

    <script type="text/javascript">

        window.onload = function showTable() {

            var tablename = document.getElementById("oTable");

 

            var oRows = tablename.getElementsByTagName("tr");

            for (var i = 0; i < oRows.length; i++) {

                oRows[i].onmouseover = function() {

                    this.style.backgroundColor = "#a5e5aa";

                }

                oRows[i].onmouseout = function() {

                    this.style.backgroundColor = "#d9ffdc";

                }

            }

        }

    </script>

</head>

<body>

    <table class="tbDatalist" summary="list of members in EE Studay" id="oTable">

        <tr>

            <th scope="col">姓名</th>

            <th scope="col">班级</th>

            <th scope="col">出生日期</th>

            <th scope="col">星座</th>

            <th scope="col">电话</th>

        </tr>

        <tr>

            <td>slepox</td>

            <td> W19</td>

            <td>Nov 18th</td>

            <td>Scorpio</td>

            <td>0658635</td>

        </tr>

        <tr>

            <td>smartlau</td>

            <td>W19</td>

            <td>Dec 30th</td>

            <td>Capricorn</td>

            <td>0006621</td>

        </tr>

        <tr>

            <td>linear</td>

            <td>W86</td>

            <td>Aug 18th</td>

            <td>Leo</td>

            <td>6398341</td>

        </tr>

        <tr>

            <td>laopiao</td>

            <td>W41</td>

            <td>May 17th</td>

            <td>Taurus</td>

            <td>1254004</td>

        </tr>

        <tr>

            <td>dovecho</td>

            <td>W19</td>

            <td>Dec 9th</td>

            <td>Sagittarius</td>

            <td>1892013</td>

        </tr>

    </table>

</body>

</html>

 

扩展与补充
1、指定在指定行范围内，隔行变色

例如鼠标只能移动表格2到4行上背景才变色，完整代码如下：

 

<html>

<head>

    <title>利用JS指定范围，实现鼠标移动表格行上变色</title>

        <style type="text/css">

        .tbDatalist

        {

            border: 1px solid #007108;

            width: 60%;

            border-collapse: collapse; /* 边框重叠,cell间没有空隙 */

            background-color: #d9ffdc;

        }

        .tbDatalist th

        {

            border: 1px solid #007108;

            background-color: #00a40c;

            color: #ffffff;

            font-weight: bold;

            padding: 4px 12px 4px 12px; /* 上 右下左 */

            text-align: center;

        }

        .tbDatalist td

        {

            border: 1px solid #007108;

            text-align: left;

            padding: 4px 10px 4px 10px /* 上 右下左 */;

        }

 

    </style>

    <script type="text/javascript">

        window.onload = function() {

            //鼠标只能移动表格2到4行上背景才变色

            showTable(2, 4);

        }

 

        function showTable(start,end) {

            var tablename = document.getElementById("oTable");

            var oRows = tablename.getElementsByTagName("tr");

           

            //校正参数

            start = start > tablename.rows.length ? 0 : start;

            end = end > tablename.rows.length ? tablename.rows.length : end;

           

            for (var i = start; i <= end; i++) {

                oRows[i].onmouseover = function() {

                    this.style.backgroundColor = "#a5e5aa";

                }

                oRows[i].onmouseout = function() {

                    this.style.backgroundColor = "#d9ffdc";

                }

            }

        }

    </script>

</head>

<body>

    <table class="tbDatalist" summary="list of members in EE Studay" id="oTable">

        <tr>

            <th scope="col">姓名</th>

            <th scope="col">班级</th>

            <th scope="col">出生日期</th>

            <th scope="col">星座</th>

            <th scope="col">电话</th>

        </tr>

        <tr>

            <td>slepox</td>

            <td> W19</td>

            <td>Nov 18th</td>

            <td>Scorpio</td>

            <td>0658635</td>

        </tr>

        <tr>

            <td>smartlau</td>

            <td>W19</td>

            <td>Dec 30th</td>

            <td>Capricorn</td>

            <td>0006621</td>

        </tr>

        <tr>

            <td>linear</td>

            <td>W86</td>

            <td>Aug 18th</td>

            <td>Leo</td>

            <td>6398341</td>

        </tr>

        <tr>

            <td>laopiao</td>

            <td>W41</td>

            <td>May 17th</td>

            <td>Taurus</td>

            <td>1254004</td>

        </tr>

        <tr>

            <td>dovecho</td>

            <td>W19</td>

            <td>Dec 9th</td>

            <td>Sagittarius</td>

            <td>1892013</td>

        </tr>

    </table>

</body>

</html>

 

 

2、鼠标点击变色，代表选择了此行

当我们在浏览数据时，如果单击某行，则此行背景变色代表选择了此行，当再次单击时，取消选择，效果如下：

代码如下：

 

<html>

<head>

    <title>利用JS，实现鼠标移动表格行上变色+鼠标点击变色</title>

        <style type="text/css">

        .tbDatalist

        {

            border: 1px solid #007108;

            width: 500px;

            border-collapse: collapse; /* 边框重叠,cell间没有空隙 */

            background-color: #d9ffdc;

        }

        .tbDatalist th

        {

            border: 1px solid #007108;

            background-color: #00a40c;

            color: #ffffff;

            font-weight: bold;

            padding: 4px 12px 4px 12px; /* 顺时针：上右下左 */

            text-align: center;

        }

        .tbDatalist td

        {

            border: 1px solid #007108;

            text-align: left;

            padding: 4px 10px 4px 10px /* 顺时针：上右下左 */;

        }

 

    </style>

    <script type="text/javascript">

        var x;

        window.onload = function showTable() {

            var tablename = document.getElementById("oTable");

            var oRows = tablename.getElementsByTagName("tr");

 

            for (var i = 0; i < oRows.length; i++) {

                //利用变量x来判断是否单击过，如果单击过使行一直变色，再次单击回复原来颜色

                oRows[i].onmouseover = function() {

                    if (this.x != "1")

                        this.style.backgroundColor = "#a5e5aa";

                }

                oRows[i].onmouseout = function() {

                    if (this.x != "1")

                        this.style.backgroundColor = "#d9ffdc";

                }

                oRows[i].onclick = function() {

                    if (this.x != "1") {

                        this.x = "1";

                        this.style.backgroundColor = "#ff00dc";

                    } else {

                        this.x = "0"

                        this.style.backgroundColor = "#d9ffdc";

                    }

                }

            }

        }

    </script>

</head>

<body>

    <table class="tbDatalist" summary="list of members in EE Studay" id="oTable">

        <tr>

            <th scope="col">姓名</th>

            <th scope="col">班级</th>

            <th scope="col">出生日期</th>

            <th scope="col">星座</th>

            <th scope="col">电话</th>

        </tr>

        <tr>

            <td>slepox</td>

            <td> W19</td>

            <td>Nov 18th</td>

            <td>Scorpio</td>

            <td>0658635</td>

        </tr>

        <tr>

            <td>smartlau</td>

            <td>W19</td>

            <td>Dec 30th</td>

            <td>Capricorn</td>

            <td>0006621</td>

        </tr>

        <tr>

            <td>linear</td>

            <td>W86</td>

            <td>Aug 18th</td>

            <td>Leo</td>

            <td>6398341</td>

        </tr>

        <tr>

            <td>laopiao</td>

            <td>W41</td>

            <td>May 17th</td>

            <td>Taurus</td>

            <td>1254004</td>

        </tr>

        <tr>

            <td>dovecho</td>

            <td>W19</td>

            <td>Dec 9th</td>

            <td>Sagittarius</td>

            <td>1892013</td>

        </tr>

    </table>

</body>

</html>

 

 

aspnet2002web
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
DOM表格 简单购物车、表格隔行变色、表格行颜色随鼠标移动变色
Birdlun的博客
07-06 436
目录 DOM访问表格元素 常用属性和方法 rows[index]返回表格指定的行为对应属性 cells[index]返回表格指定的列所对应的属性 表格的增删改查 表格添加删除常用方法 表格行添加删除方法 列：实现购物车 列：设置表格颜色并实现隔行变色 DOM访问表格元素 常用属性和方法 caption 返回表格的标题对象 rows 返回该表格里的所有表格行 tbo...
jquery实现更改表格行顺序示例
12-10
3. 如果 `move_act` 为 "up"，则找到当前行（即按钮所在的行），添加 'danger' 类以高亮显示，然后将此行移到其前一行之前，实现上移。 4. 如果 `move_act` 为 "down"，则同理，找到当前行，添加 'danger' 类，然后...
鼠标移上表格整行变色
weixin_34008933的博客
11-09 235
2019独角兽企业重金招聘Python工程师标准>>> ...
鼠标移动到表格内变色
「 GG之绿草 」
04-05 2021
鼠标移动到表格内放在表格代码的内就可以：onmouseout="this.style.backgroundColor=" onmouseover="this.style.backgroundColor=#CCCCFF"如：
在Excel中实现选中单元格行列变色的功能
最新发布
weitingfu的博客
08-01 2738
选择需要应用条件格式的单元格区域：在Excel中，首先选择你想要应用条件格式的单元格区域。设置条件格式：点击“开始”选项卡中的“条件格式”，选择“新建规则”。在规则设置中，选择“使用公式确定要设置格式的单元格”，并输入一个公式来识别需要高亮显示的行或列。然而，直接通过条件格式来实现选中单元格时行列变色可能比较复杂，因为条件格式通常是基于单元格内容或特定条件来设置格式的，而不是基于选中状态。编写VBA代码：为了更精确地实现选中单元格时行列变色的功能，你可能需要编写VBA代码。这通常涉及到使用。
鼠标移动,单击表格行变色
书山有路，学海无涯
01-07 1227
鼠标移动 表格行 出现颜色。效果如图：                                                      代码：  1.   2.   function out(){      var oObj = event.srcElement;      if(oObj.tagName.toLowerCase() == "td"){
用js实现表格中鼠标移动行变色
hfbatu的专栏
07-28 1321
 <!--var rows = document.getElementsByTagName(tr);for (var i=0;i<rows.length;i++){ rows[i].onmouseover = function(){ //鼠标在行上面的时候 this.className += altrow; } rows[i].onmouseout = func
js 当鼠标移动到表格一行上时，该行背景颜色改变
热门推荐
xyr05288的专栏
05-08 1万+
1. js，当鼠标移动到表格一行上时，该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.className+='highlight'; } rows[i].o
JavaScript实现鼠标经过表格某行时此行变色
01-21
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE ...
jQuery实现点击该行即可删除HTML表格行
10-25
在这个代码段中，`$("#sample tr")`选择了id为"sample"的表格中的所有行。`click`函数为这些行添加了一个事件监听器，当用户点击任一行时，会触发提供的函数。函数内，`$(this)`代表当前被点击的行元素。我们首先...
原生js可编辑表格实现动态添加表格行数和删除表格行数
11-11
在JavaScript（JS）中，创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求，尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先，我们需要在HTML中创建一个...
dom （委托应用1）
qq_45827064的博客
05-16 120
表格变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl.
全选，全不选表格中商品
alibabaad的博客
08-12 101
全选，全不选表格中商品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
CSS实现鼠标滑过表格变色
人生与梦
01-25 754
第一种: expression　　代码如下:　　&lt;html&gt;　　&lt;head&gt;　　&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;　　&lt;style type="text/css"&gt;　　.tablestyle{　　background-color:#C
非常简单实用的[表格鼠标移动上去变色]的代码
11-24 515
onmouseover="old_bg=this.getAttribute('bgcolor');this.setAttribute('bgcolor', '#FEFEED', 0);" onmouseout="this.setAttribute('bgcolor', old_bg, 0);  "
怎样实现鼠标移到表格,表格行背景色就变？
SpringJava的博客
12-24 580
本文要实现下面的效果，即: 鼠标移到表格,表格行背景色会改变。             Product Code        Price        Balance                NHP005         100.23         In Stock                 DOY002 ...
Jquery-01-隔行换色鼠标指向表格并且行变色
此后如竟没有炬火我便是唯一的光
08-19 1072
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.
【Excel行颜色】表格行变色 鼠标移动变色 【Excel颜色】Worksheet_SelectionChange Color
刘贵庆的博客
03-30 9657
Excel表格设置颜色定位,容易查找到对应的数据。
javascript-表格移动光标变色
liheao的博客
05-23 860
变色表格示例 function changeColor(row) { document.getElementById(row).style.backgroundColor='#CCCCFF'; } function resetColor(row) { document.getElementById(row).style.backgroundColor=''; }
vue实现双击表格某一行之后可编辑此行
06-03
可以使用vue的指令来实现这个功能。具体实现步骤如下： 1. 在表格中添加一个双击事件监听器，例如：@dblclick="editRow(row)" ...通过以上步骤，就可以实现双击表格某一行之后可编辑此行的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值