【HTML】—鼠标移入或移出表格，表格变色

来源：互联网发布：五官立体知乎编辑：程序博客网时间：2024/06/01 23:26

本文积累了几种鼠标移入或者移出html的table表格时，表格背景色变化的几种方法。

一、利用样式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(onmouseover=function(){this.style.backgroundColor='orange'});            onmouseout:expression(onmouseout=function(){this.style.backgroundColor='#d9ffdc'});            */        }        .tbDatalist tr        {            onmouseover:expression(onmouseover=function(){this.style.backgroundColor='#a5e5aa'});            onmouseout:expression(onmouseout=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>    </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>    </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>    </table></body></html>

阅读全文

0 0