表格中鼠标移入变色

最新推荐文章于 2023-06-02 17:44:04 发布
最新推荐文章于 2023-06-02 17:44:04 发布
阅读量209 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alibabaad/article/details/119877118
版权

表格中鼠标移入变色

<!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>Document</title>
</head>
<body>
    <body>
        <table id="table" border="1" width="100%" align="center" style="text-align: center;">
            <tr>
                <td colspan="5" align="left">
                    <input id="uncheckBtn" type="button" value="全不选" />
                    <input id="reverseBtn" type="button" value="反选" />
                </td>
     
            </tr>
            <tr>
                <th>全选<input id="all" type="checkbox" /></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect" /></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
            </tr>
        </table>
    </body>
    
    <script>
        window.onload = function () {
     
            // getElementsByTagName(tr标签);
            // 1. 获取所有的 tr 标签
            var trs = document.getElementsByTagName("tr");
            // alert("trs.length = " + trs.length);
     
            // 定义一个 color 属性
            var color;
     
            // 2. 遍历 trs 数组
            for (var i = 2; i < trs.length; i++) {
     
                // 3. 判断
                if (i % 2 == 0) {
                    trs[i].style.backgroundColor = "yellow";
                } else {
                    trs[i].style.backgroundColor = "skyblue";
                }
     
                // 4. 为每一行绑定一个 `鼠标移入 onmouseover` 事件
                trs[i].onmouseover = function () {
                    // 记录当前行颜色
                    color = this.style.backgroundColor;
                    // trs[i].style.backgroundColor = "#ccc";  // 行不通. (在函数内部不能使用循环变量 i)
                    // 当前行实现变色
                    this.style.backgroundColor = "#ccc";
                }
     
                // 5. 为每一行绑定一个 `鼠标移出 onmouseout` 事件
                trs[i].onmouseout = function () {
                    this.style.backgroundColor = color;
                }
            }
        }
    </script>
    
    
    
    
    
</body>
</html>
乘风测码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何实现鼠标移入变色，移出还原
09-25
该代码可以实现表格中鼠标在不同行间移动来实现输鼠标移入移出 有颜色提醒的效果
全选，全不选表格中商品
alibabaad的博客
08-12 95
全选，全不选表格中商品 <!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"> <
鼠标移动到表格内变色
「 GG之绿草 」
04-05 2013
鼠标移动到表格内放在表格代码的内就可以：onmouseout="this.style.backgroundColor=" onmouseover="this.style.backgroundColor=#CCCCFF"如：
鼠标移动,单击表格行变色
书山有路，学海无涯
01-07 1219
鼠标移动 表格行 出现颜色。效果如图：                                                      代码：  1.   2.   function out(){      var oObj = event.srcElement;      if(oObj.tagName.toLowerCase() == "td"){
用js实现表格中鼠标移动行变色
hfbatu的专栏
07-28 1314
 <!--var rows = document.getElementsByTagName(tr);for (var i=0;i<rows.length;i++){ rows[i].onmouseover = function(){ //鼠标在行上面的时候 this.className += altrow; } rows[i].onmouseout = func
javascript表格隔行变色加鼠标移入移出及点击效果的方法
10-24
主要介绍了javascript表格隔行变色加鼠标移入移出及点击效果的方法,涉及javascript实现隔行变色及鼠标点击效果的相关技巧,非常具有实用价值,需要的朋友可以参考下
table行随鼠标移动变色示例
09-04
本文将详细介绍如何实现一个“table行随鼠标移动变色”的功能，帮助开发者创建更具视觉辨识度的数据展示表格。 首先，我们来看一下基本的HTML结构。在给出的示例中，一个简单的表格（`<table>`）被创建，包含了表头...
jQuery实现鼠标滑过鼠标变色功能
06-10
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
鼠标移入后，图片变成另外的一张图片（1）| 直接给图片变色（只能变纯色）（2）
qq_66061193的博客
03-24 959
先给img的外面加个div，给div的css设置以下参数：overflow: hidden;,再给img设置以下参数：filter: drop-shadow(92px 0px white)在鼠标移入后，让本来的那张图片变成另外一张图片，用到的是hover属性。滤镜filter中的drop-shadow。（这里我用的只是不同颜色的同一张图片）投射出的形状颜色为白色。实习生每日小学习，嘿嘿~水平向右移动92px，垂直向下移动0px，
JS-隔行换色+鼠标移上去变色
weixin_45959965的博客
12-17 793
JS-隔行换色+鼠标移上去变色
非常简单实用的[表格鼠标移动上去变色]的代码
11-24 505
onmouseover="old_bg=this.getAttribute('bgcolor');this.setAttribute('bgcolor', '#FEFEED', 0);" onmouseout="this.setAttribute('bgcolor', old_bg, 0);  "
实现鼠标移动表格行上，此行背景变色研究
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
11-21 4398
当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：一、利用样式CSS表达式在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。完整代码如下：在样式里写表达式expression，实现鼠标经过表格行上变色        .tbDatalist        {            border: 1pxsolid#007108;            width: 60%;            border-collapse: collap
HTML+CSS实现鼠标移动到某位置文本变色/显现效果
欢迎来到超级予的博客 Welcome to SuperAyu's Blog
09-28 8726
借助hover属性直接在text标签处修改即可。
前端如何实现鼠标移上这个元素，另外一个元素变色
weixin_65635437的博客
06-02 2240
前端如何实现鼠标移上这个元素，另外一个元素变色
javascript-表格移动光标变色
liheao的博客
05-23 851
变色表格示例 function changeColor(row) { document.getElementById(row).style.backgroundColor='#CCCCFF'; } function resetColor(row) { document.getElementById(row).style.backgroundColor=''; }
当鼠标移到单元格(tr、td)背景变色 多种解决方案
热门推荐
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
鼠标移入字体变色
shi_jia233的博客
10-18 1万+
1打开DW，CTRL+n新建一个html 2在html的body里打上ul再打上li和a标签 3在title里给li设置字体大小，背景宽高，外右边距，背景颜色和居中。 给a标签设置颜色和去下划线 还有鼠标移入a标签后的字体颜色和字体大小 4下午茶是移入后的效果其他的是未移入的效果，也可以设置背景颜色的变化 5以下的代码把a标签给减去了，然后给li加上鼠标移入后的背景颜色和字体颜色 6下午茶是移入后的效果其他的是未移入的效果 ...
（28）表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色
虚心求学_一点一滴
07-19 3511
基本思想：采用表格中某一行的
用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮
汉尼拔的手术室
04-14 1814
用HTML+JavaScript实现表格的分行变色加鼠标移动变高亮 效果如下： 错误代码（只在srcipt中出现错误）： window.onload=function(){ var oTab=document.getElementById('tab1'); for(var i=0;i<oTab.tBodies[0].
css怎么设置鼠标移入文字变色
最新发布
06-07
您可以使用CSS的:hover伪类来实现鼠标移入文字变色的效果。具体代码如下： ```css /* 设置默认文字颜色 */ p { color: black; } /* 鼠标移入文字变色 */ p:hover { color: red; } ``` 上述代码中，通过设置p...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值