练习案例_鼠标经过表格行变色

最新推荐文章于 2022-02-25 14:46:35 发布
最新推荐文章于 2022-02-25 14:46:35 发布
阅读量121 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/linyongqin/articles/5572549.html
版权

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>鼠标经过表格行变色</title>
    <style type="text/css">

        td{
            border-bottom: 1px solid lightgray;
            width: 100px;
            height: 25px;
        }
        .firstTd{
            width: 30px;
        }
    </style>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            //选中table下面的除了第一行外所有的行
            $("#mailTable tr:not(:eq(0))").mouseenter(function(){
                this.style.backgroundColor="lightgray";
            }).mouseout(function () {
                this.style.backgroundColor="";
            });
        });
    </script>
</head>
<body>


<table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px">

    <tr><td class="firstTd"></td><td>收件人</td><td>主题</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>

</table>
</body>
</html>

 

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <style type="text/css">
        td{
            border-bottom: 1px solid lightgray;
            width: 100px;
            height: 25px;
        }
        .firstTd{
            width: 30px;
        }
    </style>
    <script type="text/javascript">


        window.onload=function(){

            var table = document.getElementById("mailTable");

            var trs = table.getElementsByTagName("tr");
            for(var i=1;i<trs.length;i++){

                var tr = trs.item(i);

                //鼠标进入事件
                tr.οnmοuseοver=function(){

                    this.style.backgroundColor="lightgray";

                }

                //
                tr.οnmοuseοut=function(){

                    this.style.backgroundColor=null;

                }
            }
        }

    </script>
</head>
<body>
    <table id="mailTable" border="0" cellpadding="0" cellspacing="0" style="width: 600px">
        <tr><td class="firstTd"></td><td>收件人</td><td>主题</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
        <tr><td class="firstTd"><input type="checkbox" name="mail" /></td><td>蛋蛋</td><td>。。。</td></tr>
    </table>
</body>
</html>

 

转载于:https://www.cnblogs.com/linyongqin/articles/5572549.html

bailiang9872
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现鼠标经过表格行变色的方法
10-24
主要介绍了js实现鼠标经过表格行变色的方法,涉及javascript表格节点样式及鼠标事件的相关操作技巧,需要的朋友可以参考下
案例：表格鼠标经过变色 / 全选反选
weixin_50119334的博客
10-02 334
案例一：表格鼠标经过变色 案例：用到鼠标事件：鼠标经过 onmouseover 鼠标离开 onmouseout 思路：鼠标经过tr行，当前行变换背景颜色，鼠标离开去掉当前背景颜色 //注意：第一行（thead里面的行）不需要变换颜色，因此我们获取的是tbody里面的行 <style> table { width: 800px; margin: 100px auto; text-align: center; border-
javasript | 鼠标经过表格行变色
qq_44280408的博客
02-25 388
效果：鼠标浮动在哪行，哪行就变色 思路：一个table，table里面有thead和tbody，thead里面tr表示一行，th表示一格；tbody里面tr表示一行，td表示一格。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
鼠标经过时整行变色的表格
weixin_34358365的博客
10-13 185
<title>鼠标经过时整行变色的表格</title><style>table{color:#565;font:12px Arial, Helvetica, sans-serif;}td{ border-bottom:2px solid #b3de94;border-top:3px solid #fff;padding:9px;}tr{background...
鼠标划过表格行变色效果JS
勇往直前的专栏
07-21 3229
&lt;!--鼠标滑过表格行变色效果开始--&gt; &lt;script type="text/javascript"&gt;         /* 当鼠标移到表格上是，当前一行背景变色 */       $(document).ready(function(){             $(".g-sun-li tr td").mouseover(function(){            ...
JavaScript（JS）网页--鼠标经过表格某行时此行变色
Dreamer
11-17 1929
鼠标经过表格行变色 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鼠标经过
JavaScript实现鼠标经过表格某行时此行变色
01-21
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE ...
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
10-30
经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色
鼠标经过表格变色
水墨熊猫
12-10 2373
工作学习中经常会用到的代码，很实用既可以实现隔行换色，又可以实现鼠标经过换色，鼠标移开换为原色注：如果点击“运行代码”后没有隔行换色效果，刷新页面后可以看到效果，有点小郁闷~~~~~应用的时候绝对没问题。function Run() { var str = document.all.stefli.value; var re = /(/[STEFLICODE])(.[^/
鼠标划过表格行变色
Keeping
05-02 206
鼠标划过表格行变色－简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;} #tb td{border:1px soli...
JavaScript基础 鼠标经过表格行变色效果
weixin_44944007的博客
12-05 788
当鼠标经过行时，清除所有行的变色效果，只给当前的行添加一个类.bg{background-color:blue}。这是“排他思想”：利用循环给所有元素清除样式，给当前元素设置样式，且步骤不能颠倒。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
如何实现表格中鼠标划过一行整行变色，点击一行选中一行
qq_40422692的博客
07-21 4490
这里`在这里插入代码片`写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你
表格行鼠标事件变色的例子
小李专栏
07-13 2128
表格行鼠标事件变色的例子注：本文收藏自网络（猪飞飞s Blog），文责版权均为原作者所有，本人仅作收藏学习之用。以下为引用：做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果.一个N行N列的表格,实现鼠标移到某行变色,然后点击某一行使之固定一种颜色,再点使之返回原色.原理是使保持原色,鼠标事件对下的样式背景色进行改变.同时可以设置避免变色事
鼠标点击表格行背景变色 js
weixin_30640769的博客
04-26 401
<HTML><HEAD><TITLE>鼠标点击表格行背景变色</TITLE><style> .MouseOverClick {background-color: #D9EFFD} .MouseOutWhite {background-color: #FFFFFF}</style>...
实现鼠标移动表格行上，此行背景变色研究
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
11-21 4329
当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：一、利用样式CSS表达式在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。完整代码如下：在样式里写表达式expression，实现鼠标经过表格行上变色        .tbDatalist        {            border: 1pxsolid#007108;            width: 60%;            border-collapse: collap
鼠标经过时改变表格行的背景颜色
Lam's IT Story
04-16 413
鼠标经过时改变表格行的背景颜色： <tr height="30px" onmouseover="this.style.background='#E9E9E9'" onmouseout="this.style.background='#FFFFFF'"> </tr> 如果想要改变该行下面的列的背景颜色，只需把它放到<td></td>标签里面即可 ...
jquery表格隔行变色和当前行变色
最新发布
04-11
根据描述，似乎您是问如何使用jQuery改变表格行的颜色和当前行的颜色。 要改变表格行的颜色，可以选择使用CSS或jQuery。如果选择使用CSS，则可以使用以下代码： ``` tr { background-color: #ddd; } ``` 如果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值