鼠标移到表格的某一行，那一行变色的问题

最新推荐文章于 2021-06-16 05:49:15 发布
最新推荐文章于 2021-06-16 05:49:15 发布
阅读量1.1w 收藏 6
点赞数 3

这个实现的过程很简单，网上相关实现的例子很多，这里记录下自己之前实现的方法。参考的网上的例子，网址不记得了。

 这个问题简单点就是鼠标响应事件。

下面放代码

<html>

<title></title>

<head>

<script type="text/javascript">
    var rows = document.getElementsByTagName('tr');//取得行
        for(var i=0 ;i<rows.length; i++)
        {
            rows[i].onmouseover = function(){//鼠标移上去,添加一个类'hilite'
                this.className += 'hilite';
            }
            rows[i].onmouseout = function(){//鼠标移开,改变该类的名称
                this.className = this.className.replace('hilite','');
            }
        }
    </script>
        
        <style type="text/css">
            .table1 tr:hover,.table1 tr.hilite
            {
            background-color:#99FF66;
            color:#0000CC;
            }
        </style>
    </head>
  <body>
           <form action="">
               
               <table id="table1" class="table1">
                   <tr>
                       <th>姓名</th>
                       <th>年龄</th>
                       <th>性别</th>
                   </tr>
                   <tr>
                       <td>小红</td>
                       <td>12</td>
                       <td>女</td>
                   </tr>
                   <tr>
                       <td>小明</td>
                       <td>14</td>
                       <td>男</td>
                   </tr>
               </table>
               <table id="table2" class="table1">
                   <tr>
                       <th>国家</th>
                       <th>身份</th>
                       <th>性别</th>
                   </tr>
                   <tr>
                       <td>中国</td>
                       <td>将军</td>
                       <td>女</td>
                   </tr>
                   <tr>
                       <td>美国</td>
                       <td>部长</td>
                       <td>男</td>
                   </tr>
               </table>
           </form>
  </body>
</html>


上面就是针对指定的table实现鼠标移动到某一行上面的时候那一行变色的这个效果

rookie_s
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【table行换颜色】点击移动table切换颜色
Hitachi231的博客
05-03 641
首先头文件定义样式，我的比较挫 table { border-collapse: collapse; margin: 0 auto; text-align: center; width: 90% } table td, table th { border: 1px solid #cad9ea; color:...
js 当鼠标移动到表格一行上时，该行背景颜色改变
xyr05288的专栏
05-08 1万+
1. js，当鼠标移动到表格一行上时，该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.className+='highlight'; } rows[i].o
dom （委托应用1）
qq_45827064的博客
05-16 100
表格变色 <!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-Compatible" content="ie=edge"> <titl.
表格行鼠标事件变色的例子
netxdiy的blog
10-24 121
表格行鼠标事件变色的例子 做一个表格列表中整行鼠标移动变色的效果,找了一段现成代码再改了一点,加上鼠标点击变色和再点击变回原色的效果.一个N行N列的表格,实现鼠标移到某行变色,然后点击某一行使之固定一种颜色,再点使之返回原色.原理是使&lt;tr&gt;保持原色,鼠标事件对&lt;tr&gt;下的&lt;td&gt;样式背景色进行改变.同时可以设置避免变色事件的行,主要是针对标题行.相信这段代码...
表格隔行变色以及鼠标移上变色 js代码
qq_40216244的博客
09-04 511
var oldColor=''; //var oTab=document.getElementById('tab1') function toColor(tableID) { var oTab=document.getElementById(tableID) for(var i=0;i&lt;oTab.tBodies[0].rows.leng...
实现鼠标移动表格行上，此行背景变色研究
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
11-21 4415
当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：一、利用样式CSS表达式在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。完整代码如下：在样式里写表达式expression，实现鼠标经过表格行上变色        .tbDatalist        {            border: 1pxsolid#007108;            width: 60%;            border-collapse: collap
如何实现表格中鼠标划过一行整行变色，点击一行选中一行
qq_40422692的博客
07-21 4598
这里`在这里插入代码片`写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你
jsp表格中实现鼠标放到某一行，使这行背景变色，移开时背景色还原。
无道的博客
04-21 7332
思路：1、了解js获取表中tr。     2、了解鼠标移上、移出方法。             3、了解js中替换css中样式。 //获取tr         var rows = document.getElementsByTagName('tr'); //鼠标放在、或移出表格中某一行的效果。 for（int i=0;i if() }
鼠标经过表格变色
11-15
通过jquery给经过的表格设置css背景变色效果
Excel鼠标所在行列填充颜色
TT-Learning
11-21 3329
打开需要设置的工作簿，按下快捷键：Alt + F11 在跳出的窗口中，双击选中需要设置的工作簿，填充如下内容： Private Sub Worksheet_SelectionChange(ByVal Target As Range) With Target .Parent.Cells.Interior.ColorIndex = xlNone .Entir...
如何在点击鼠标后某一行字体颜色发生变化_excel技巧：excel如何绘制边框？
weixin_39643189的博客
11-25 795
Excel表格如何添加绘制边框？日常生活中我们会经常用Excel表格做表，以便于我们在生活中的方便。而在Excel里我们可以直接在上面输入我们需要的内容，但有些时候打印出来，有一些表格是没有边框线，我们该怎么解决这类的问题呢？答案很简单，只需打印的表格要着重突出某一部分，需要给一部分边框加上着重或者与众不同的边框线，那么这又该怎么做呢？跟着小编走，就会轻松的解决大家的烦恼。操作步骤：1.打开Exc...
鼠标悬停在表格任意一个＜td＞上改变整行背景颜色并在第一个td显示象征性的某图片
leng0920的博客
08-18 5955
效果如图 正常效果 鼠标悬停效果 html代码 <div class="list-div" id="listDiv"> <table cellspacing='1' cellpadding='3'> <tr> <th>日志ID</th> <th>操作者</th> <th>操作日期</th> <th>ip地
鼠标点击改变单元格颜色或点击改变行颜色
DN_XIAOXIAO的博客
04-19 7424
单击改变行颜色打开一模板如：%FR_HOME%\WebReport\WEB-INF\reportlets\GettingStarted.cpt模板，点击模板&gt;模板web属性&gt;分页预览设置，选择为该模板单独设置，然后添加加载结束事件，具体js如下：contentPane.makeHighlight('red'); //使点击的行变成红色  分页预览模板，当鼠标点击某行时，某行变色。如果要...
CSS3改变表单控件光标的颜色
coder丶东的博客
10-27 1416
场景还原先来看一段代码<html lang="en"> <head> <meta charset="UTF-8"> <title>表单光标</title> <style> #text1{ color: red; } </style> </head> <body> <input id="text1" typ
excel html 颜色,excel怎么设置鼠标横竖颜色
weixin_35009700的博客
06-16 5902
处理光标(Cursor属性) Sub ViewCursors() Application.Cursor = xlNorthwestArrow MsgBox "您将使用箭头光标,切换到Excel界面查看光标形状" Application.Cursor = xlIBeam MsgBox "您将使用工形光标,切换到Excel界面查看光标形状" Application.Cexcel如何设置鼠标点击后会改变...
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
在表格中鼠标移动到哪一行，哪一行就变色
qq_43143902的博客
11-03 4859
代码如下： 效果如下：
elementui表格选中一行变色
最新发布
05-26
可以通过设置 `rowClassName` 属性来实现选中一行变色的效果。具体实现方式如下： 1. 首先，在表格组件中添加 `rowClassName` 属性，该属性接受一个函数作为参数，用于判断行是否被选中。示例如下： ```html <el-table :data="tableData" :row-class-name="tableRowClassName"> ``` 2. 在 Vue 实例中定义 `tableRowClassName` 方法，该方法接收一个参数 `row`，表示当前行的数据。在该方法中，可以判断该行是否被选中，并返回对应的类名。示例如下： ```javascript methods: { tableRowClassName({row, rowIndex}) { if (rowIndex === this.selectedIndex) { return 'selected-row'; // 选中行的类名 } return ''; } } ``` 其中，`this.selectedIndex` 表示当前选中的行的索引。如果当前行的索引与选中行的索引相等，则返回 `'selected-row'` 类名，否则返回空字符串。 3. 在选中行时，设置 `selectedIndex` 的值，触发表格组件重新渲染，实现选中一行变色的效果。示例如下： ```javascript methods: { handleRowClick(row, column, event) { this.selectedIndex = row.index; } } ``` 在上述代码中，`handleRowClick` 方法用于处理行点击事件，当用户点击某一行时，设置 `selectedIndex` 的值为当前行的索引，从而触发表格组件重新渲染。 最后，通过 CSS 样式设置选中行的背景色即可。例如，可以在样式文件中添加如下代码： ```css .selected-row { background-color: #f5f7fa; } ``` 这样，当用户选中一行时，该行的背景颜色会变成灰色，从而实现选中一行变色的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值