31.鼠标悬浮时动态改变当前行的背景色 各行换色

最新推荐文章于 2023-04-04 17:14:16 发布
最新推荐文章于 2023-04-04 17:14:16 发布
阅读量228 收藏
点赞数
原文链接：https://my.oschina.net/springMVCAndspring/blog/1518937
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1.效果

    1.1 各行换色

225101_CP6d_3015807.png

1.2 JS版本鼠标移动上去变色移出还原

002752_dFF1_3015807.png

1.23 jQuery版本鼠标悬浮背景颜色

224644_6Q4G_3015807.png

2.代码

2.1各行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>各行换色</title>
        <script>
            window.οnlοad=function(){
                //1.获取表格对象
        var tabele =  document.getElementById("tab");
        //2.获取表格tbody里面的数据条数
        var len =    tabele.tBodies[0].rows.length;
        //3.循环给基数和偶数行设置不同的背景颜色
            for(var i=0;i<len;i++){ 
                if(i%2==1){//奇数行
                var JiShuRows =        tabele.tBodies[0].rows[i];
                JiShuRows.style.backgroundColor="green";//注意style  首字母小写的
                }else{
                    var OushuRows =        tabele.tBodies[0].rows[i];
                OushuRows.style.backgroundColor="red";//注意style  首字母小写的
                }
            }
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab">
            <thead>
                <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>家庭地址</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                <td>张三</td>
                <td>15</td>
                <td>陕西西安</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>26</td>
                <td>北京海淀区</td>
            </tr>
            <tr>
                <td>小五</td>
                <td>24</td>
                <td>天津大港</td>
            </tr>
            <tr>
                <td>小六</td>
                <td>26</td>
                <td>上海浦东</td>
            </tr>
            <tr>
                <td>小七</td>
                <td>23</td>
                <td>广东广州</td>
            </tr>
            <tr>
                <td>张萌</td>
                <td>12</td>
                <td>重庆</td>
            </tr>
            </tbody>
        </table>
    </body>
</html>
 

 

 

2.2 JS版本鼠标移动上去变色移出还原

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>各行换色</title>
        <script>
            window.οnlοad=function(){
        var alltr =    document.getElementsByTagName("tr");
        for(var i=1;i<alltr.length;i++){
            if(i%2 ==0){
                alltr[i].style.backgroundColor="red";
            }else{
                alltr[i].style.backgroundColor="gainsboro";
            }
            alltr[i].οnmοuseοver=function(){
                this.setAttribute("bgc",this.style.backgroundColor);
                this.style.backgroundColor="greenyellow";
            }
            alltr[i].onmouseout =function(){
                this.style.backgroundColor=this.getAttribute("bgc")
            }
        }
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab">
            <thead>
                <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>家庭地址</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                <td>张三</td>
                <td>15</td>
                <td>陕西西安</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>26</td>
                <td>北京海淀区</td>
            </tr>
            <tr>
                <td>小五</td>
                <td>24</td>
                <td>天津大港</td>
            </tr>
            <tr>
                <td>小六</td>
                <td>26</td>
                <td>上海浦东</td>
            </tr>
            <tr>
                <td>小七</td>
                <td>23</td>
                <td>广东广州</td>
            </tr>
            <tr>
                <td>张萌</td>
                <td>12</td>
                <td>重庆</td>
            </tr>
            </tbody>
        </table>
    </body>
</html>

 

 

2.3 鼠标悬浮改变背景颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>各行换色</title>
        
        <script src="../js/jquery-1.8.3.js"></script>   <!--注意引入jQuery-->
        
        <script>
        window.οnmοuseοver=function(){//鼠标悬浮事件触发
        //鼠标悬浮时动态改变当前行的背景色
                //1、得到tr对象，并绑定鼠标悬浮事件
                $("tbody tr").hover(
                    function(){
                        $(this).css("background-color","red");//给当前tr添背景色
                    },
                    function(){
                        $(this).css("background-color","");//给当前tr添背景色,给“”值则使用原来的值
                    }
                );
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="300px" height="100px" id="tab">
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                <th>姓名</th>
                <th>年龄</th>
                <th>家庭地址</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                <td><input type="checkbox"></td>
                <td>张三</td>
                <td>15</td>
                <td>陕西西安</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>李四</td>
                <td>26</td>
                <td>北京海淀区</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>小五</td>
                <td>24</td>
                <td>天津大港</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>小六</td>
                <td>26</td>
                <td>上海浦东</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>小七</td>
                <td>23</td>
                <td>广东广州</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>张萌</td>
                <td>12</td>
                <td>重庆</td>
            </tr>
            </tbody>
        </table>
    </body>
</html>
 

转载于:https://my.oschina.net/springMVCAndspring/blog/1518937

weixin_33851177
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标移动改变所在行背景色。
angel900的博客
03-16 346
<script type="text/javascript"> window.onload = function(){ // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。 var y=document.getElementsByTagName("tr"); for (i=0;i<y.length;i++){ if(y[i].c..
el-table 鼠标悬停时表格行的背景颜色有效与无效修改
最新发布
晚秋的专栏
04-10 3982
element ui 中，el-table表格建立，默认鼠标悬停背景色为白色，表格字体为白色，则内容看不清，所以需要修改背景色。
鼠标悬停在表格任意一个＜td＞上改变整行背景颜色并在第一个td显示象征性的某图片
leng0920的博客
08-18 5930
效果如图 正常效果 鼠标悬停效果 html代码 <div class="list-div" id="listDiv"> <table cellspacing='1' cellpadding='3'> <tr> <th>日志ID</th> <th>操作者</th> <th>操作日期</th> <th>ip地
el-table 表格 修改鼠标悬停时表格(行)的背景颜色
weixin_44816197的博客
01-04 4872
表格中有使用按钮 右边是按钮 // 鼠标悬停样式 /deep/.el-table__body .el-table__row.hover-row td { background-color: #fff6f7 !important; } 表格中有使用按钮 /deep/ .el-table { tbody tr { &:hover { td { background-color: #fff6f7 !important; } } ..
鼠标悬浮修改表格背景颜色（js/css）
heart_is_broken的博客
11-02 1124
<!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"> <title>鼠标
vue element ui修改导航菜单栏鼠标悬浮时的背景颜色和点击二级菜单时多出的一像素边框问题
qq_43628847的博客
08-30 1万+
通过浏览器调试找到 复制粘贴后，修改颜色 /* 修改导航菜单栏悬浮时的背景颜色 / .el-submenu__title:hover, .el-menu-item:focus, .el-menu-item:hover{ background-color: cornflowerblue; } / 导航二级菜单栏点击之后的一像素边的问题 */ .el-menu{ border-right: none; } ...
Vue.js鼠标悬浮更换图片功能
10-19
主要为大家详细介绍了Vue.js实现鼠标悬浮更换图片功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Jquery的hover方法让鼠标经过li时背景变色
10-26
鼠标经过时让li背景变色，在某些时候还是挺实用的，下面为大家介绍下使用Jquery的hover方法来实现下，感兴趣的朋友可以参考下
QTableView鼠标滑过整行背景色改变.zip
07-09
QTableView鼠标滑过整行背景色改变 整理自：https://zhidao.baidu.com/question/572964103.html 的回答
鼠标悬浮动态折线图-Excel表格.pdf
11-16
鼠标悬浮动态折线图-Excel表格.pdf
asp.net Gridview数据列中实现鼠标悬浮变色
10-29
Gridview一般朋友们都比较常用，因为它可以方便快捷的实现我们所需的很多功能，代码也比较简洁。平时的项目中这个控件我也比较常用，其中有个功能用到的频率也比较多。所以记录下备忘。
div css 鼠标悬停在div层上时，div背景色改变
09-25
如果要实现，当鼠标移到div层上时，改变其背景色，我试了好多方法，只有这个方法可行，百度上其他的似乎有问题，暂且这样说吧。
按键盘改变背景色
weixin_57772585的博客
07-27 343
5.然后封装一个方法，根据传递的参数值，改变div的背景色；随后表达式的值会与结构中的每个case的值做比较。4.链入jQuery代码链接，我们需要实现的效果是在页面中按下键盘上的键的时候，获取他的Unicode编码给body背景色；我们按下键盘改变背景颜色的时候里面的文字也是要改变的，然后获取到背景色里面的文字。6.案例完成，每个键盘字母都是代表一个数字，在我们按下键盘时背景颜色改变并和数字一起显示，没有写的点击就会显示查无此键。2.开始写背景的样式和标题以及背景里面内容的样式。...
JavaScript如何实现鼠标悬浮适表格对应行变色？
黑马程序员官方博客
04-27 1203
我们需要通过JS实现鼠标悬浮表格对应行变色的效果，效果在文末。 下面通过代码实现： <!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-Compatibl
鼠标悬浮在表格上，所在行变色
qq_48964916的博客
06-25 481
控制选中行的背景颜色 background：rgba(0,0,0,0) 前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。 第四个值，alpha值，制定了色彩的透明度/不透明度，它的范围为0.0到1.0之间,0.5为半透明。 rgba(255, 255, 255, 0)则表示完全透明的白色 rgba(0, 0, 0,1 )则表示完全不透明度的黑色 ...
纯css实现鼠标悬浮、点击更改元素背景
qq_42981449的博客
04-04 4901
【代码】纯css实现鼠标悬浮、点击更改元素背景。
鼠标悬停在HTML-TABLE的某一行上 改变这一行的背景颜色
代码笔记
11-10 5130
主要CSS代码: #table1 tbody tr:hover { background-color: yellow; } 解释: ID为table1的table里的tboy里的tr的hover时,背景颜色为:yellow 黄色... 完整代码: <style> #table1 tbody tr:hover { background-color: yellow; } </style> <table i
JS代码实现：鼠标悬停与离开（两种方式）
热门推荐
kuaixiao0217的博客
04-21 1万+
用JS代码实现两种方式的鼠标悬停与离开
【原生js】实现表格悬浮变色
在热爱技术的路上一直前行。
05-20 480
1. 思路 用到的事件：mouseover（鼠标经过）、mouseout（鼠标离开）； 鼠标经过tr行，当前行背景变色，鼠标离开背景颜色恢复； 注意：thead中的行无需变色，只需要操作tobody中的行即可； 2. 代码 2.1 html <table> <thead> <tr> <th>姓名</th> <th>学号</th> <th>
如何实现span标签当鼠标悬浮时更改背景色
02-12
在HTML文件中，你可以使用如下代码实现在鼠标悬浮在 span 标签上时更改背景颜色： ...在这种情况下，当鼠标悬浮在 span 标签上时，背景颜色将更改为 "yellow"，当鼠标离开 span 标签时，背景颜色将恢复为 "white"。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值