table鼠标滑入tr整行背景变色

最新推荐文章于 2024-07-06 00:11:00 发布
最新推荐文章于 2024-07-06 00:11:00 发布
阅读量858 收藏
点赞数
文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45301765/article/details/107149739
版权

之前公司让做一个鼠标滑入tr整行变色, 我一直在纠结应该怎么写    试了几次hover 发现效果不太满意   然后找了好长时间百度  终于找到了这个脚本  不多BB直接看代码

 

 

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>鼠标滑入tr整行变色</title>
    <style type="text/css">
    table {
    daoborder-collapse:collapse;
    }
    td {
    border:#000 solid 1px;
    }
    </style>
    </head>
    
    <body>
    <script type="text/javascript">
     function fmove(event){  
         var tr=event.target.parentNode;
         var table = tr.parentNode;
         if(table.children[0] != tr) {
          var array = tr.children;
         for ( var i = 0; i < array.length; i++) {
          var td = array[i];
          td.style.backgroundColor="#fef7f0";
         }
         }
      
        
       }  
       function fout(event){  
          var tr=event.target.parentNode;  
         
          var array = tr.children;
       for ( var i = 0; i < array.length; i++) {
        var td = array[i];
        td.style.backgroundColor="white";
       }
      }  
    
    </script>
    <body>
    
    
    
    
    <table width="972" border="0" cellpadding="0"" cellspacing="0" οnmοusemοve="fmove(event)"   οnmοuseοut="fout(event)">  
    
           <tr>
          <th class="bk" width="85" height="26" scope="col"><div id="u69">
                              <div id="u69_rtf">
                                <p>序号</p>
                              </div>
             </div></th>
          <th width="140" scope="col">标题1</th>
          <th width="127" scope="col">标题2</th>
          <th width="130" scope="col">标题3</th>
             <th width="100" scope="col">标题4</th>
             <th width="132" scope="col">标题5</th>
           </tr>
           <tr>
          <td height="42" align="center" >1</td>
          <td align="center" >xxx</td>
          <td align="center" >xxxx</td>
          <td align="center" >xxxx</td>
             <td align="center" >&nbsp;</td>
             <td align="center" >2012-1-12</td>
           </tr>
            <tr>
          <td height="42" align="center" >2</td>
          <td align="center" >xxx</td>
          <td align="center" >xxxx</td>
          <td align="center" >xxxx</td>
             <td align="center" >&nbsp;</td>
             <td align="center" >2012-1-12</td>
              </tr>
           <tr>
          <td height="42" align="center" >2</td>
          <td align="center" >xxxx</td>
          <td align="center" >xxxx</td>
          <td align="center" >xxx</td>
             <td align="center" >&nbsp;</td>
             <td align="center" >2012-1-12</td>
              </tr>
    </table>
    </body>
    </html>

 

RZY_任
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当鼠标移到单元格(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
鼠标滑过table时修改表格行的背景颜色
weixin_30929195的博客
04-17 1652
方法一： #customers tr:hover { background-color: #f00; } 方法二： <tr onmouseover="style.backgroundColor='#FF9900'" onmouseout="style.backgroundColor='#FFFFFF'"> <td>Appl...
Table中鼠标移动tr变色
qq_23392319的博客
03-28 703
html: {foreach from=$input_arr key=key item=v} <tr style="cursor:hand " οnmοusemοve="changeTrColor(this)"> {/foreach} js: <script type="text/javascript"> function changeTrColor(obj){ var _table=obj.parentNode; for (var i=0;i<_table.ro
点击《el-table》让选中的行变色，亲测实用
技术前端，忠于热爱 @0.活在风浪里
03-24 1万+
公司各种需求又来了，直接看下面文吧，一看就懂就不在说需求了，此时我觉得我的表情包是【我就像是一个小朋友站在路标下满头的问号】亲测管用，希望可以帮助到大家
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
javascript table美化鼠标滑动单元格变色
10-30
描述中提到，这种效果非常不错的 table 美化，当鼠标滑过去，背景色变换效果。这说明了这种效果的主要特点是能够根据鼠标的滑动来改变单元格的背景色，从而美化表格的外观。 标签解释 标签中提到了三个关键词：...
table鼠标经过时整行变色 jquery
04-20
在网页设计中，表格（Table）是一种常见的数据...通过这种方式，你可以实现表格鼠标经过时整行变色的效果，同时保持与其他框架的兼容性。在实际应用中，可以根据需求调整颜色、动画效果等细节，以达到最佳的视觉效果。
jquery实现table鼠标经过变色代码
10-26
table鼠标经过变色的效果想必大家都有见到过吧，其实实现很简单，在本文有个不错的示例，感兴趣的朋友可以学习下
HTML中实现鼠标经停时整行（tr）变色
12-30
使用纯CSS实现在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点： <html > <head> <meta charset=utf-8/> <title>change</title> <style type=...
jquery table鼠标滑过隔行变色表格样式代码
10-29
jQuery 与 HTML 表格（table）的结合可以实现许多实用的功能，如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验，使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能，我们需要...
js控制table的tr变色
03-16
js控制table的tr变色,非常实用，可控想变色的行，也可得到table中的任意td的值。
更改表格行tr的背景颜色
weixin_45190226的博客
02-22 7410
一.业务代码说明： 制作一张商品信息表格，要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化，当鼠标移开其背景颜色就会恢复为白色。 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change table row backGroundColor</title> <style>
table tr隔行变色
王燕欣的博客
05-21 2719
$("tbody的class名  tr:odd").addClass("color1"); 双行  $("tbody的class名  tr:even").addClass("color2");单行 自己写color1和color2的样式就可以了
tr:hover变色的问题
简单快乐
11-03 6820
css tr 变色
table 中的tr 行点击 变换颜色背景
dengjuanshou7445的博客
08-15 194
<style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border:1px solid #ccc;text-align: center;} table tr th...
Table tr 的隔行变色
weixin_30794499的博客
01-18 410
<style type="text/css">table{border-collapse:collapse;border:1px solid #999;}td{border:1px solid #999;} #table tr.color1{background-color:#fafafa;}#table tr.color2{background-...
ES6 新特性有哪些
最新发布
weixin_64684095的博客
07-06 1019
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
table 鼠标滑过整行变色
03-30
例如，将表格中每一行的背景颜色设置为白色，然后使用:hover来设置当鼠标悬停在该行上时，背景色变为灰色： ``` table tr { background-color: white; } table tr:hover { background-color: gray; } ``` 您...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值