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

最新推荐文章于 2020-07-21 21:34:38 发布
最新推荐文章于 2020-07-21 21:34:38 发布
阅读量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:...
JavaScript实现鼠标经过表格某行时此行变色
01-21
表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=UTF-8> <meta name=...
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...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
10-24
当鼠标移入某一行时，改变其背景色以突出显示；当鼠标移出时，恢复原来的隔行变色效果。这有助于用户清楚地知道他们正在查看哪一行内容。 最后，实现点击变色的功能，主要是为了用户能够更直观地选择或标记他们感...
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
12-09
这段代码会使得当鼠标悬停在表格的任意一行上时，该行的背景颜色变为`#F8F8F8`。这种方法在支持CSS3的浏览器中都能正常工作，包括IE6、IE7和Firefox 2。 虽然示例没有直接使用JavaScript，但在某些情况下，可能需要...
双击表格连接到另一页/改变颜色/行随鼠标变色
09-01
### 双击表格连接到另一页/改变颜色/行随鼠标变色 #### DataGrid 双击事件与页面跳转 在Web开发中，DataGrid 控件被广泛应用于展示数据列表，用户可以通过交互操作（如点击、双击等）来执行特定的功能。本篇文章将...
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
09-04
javascript实现网页中表格的行随着鼠标移动而变色，实时变色表格行
实现鼠标移动表格行上，此行背景变色研究
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
11-21 4413
当我们鼠标移动表格某一个行上，此行背景变色，共找到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编辑器 所展示的欢迎页。如果你
【Vegas原创】EXCEL光标所在的行自动变色
weixin_34061482的博客
09-10 706
  方法： 1,excel中，按Alt+F11，打开VBA编辑界面，双击需要改的工作表名称，将下面代码粘贴到右边框中，即可。 2，代码： Private Sub Worksheet_SelectionChange(ByVal Target As Range) Cells.Interior.ColorIndex = 0 Rows(Target.Row).Int...
在表格中鼠标移动到哪一行，哪一行就变色
qq_43143902的博客
11-03 4858
代码如下： 效果如下：
鼠标放到哪一行，哪一行颜色发生变化
netzmj的专栏
12-21 841
protected void GridView2_RowDataBound1(object sender, GridViewRowEventArgs e) { if (e.Row.RowType==DataControlRowType.DataRow) { //当鼠标在某一行上方时激发 e.Row.A
CSS鼠标悬浮某元素上变色
热门推荐
xiaosongwahaha的博客
12-31 1万+
例子： .menu_list ul li .fuMenu{ color: rgba(255,255,255,0.6) } .menu_list ul li .fuMenu:hover{     color: rgba(255,255,255,.85); }
鼠标移到隔行变色的表格上，有背景变化，并且点击的时候选中复选框和背景色
java_zhaoyanli的专栏
10-19 1036
changecolor(); //隔行变色 function changecolor() { var i = 0; var jian = 0; $('.bugtable tr').each(function () { i++; jian = i - 1; if (
鼠标移入图标显示颜色
learning_ever的博客
11-05 2013
今天有些空闲，了解了解现在前端的技术，无意中看到一个鼠标移入图片显示颜色这个功能，通常的时候我们会用雪碧图，改变不同的位置显示不同的图片，或者两张图片替换，但是今天意外发现一整更简便的方法，一张图片就可以搞定，那就是css的filter实现。好了不多说直接看代码吧。 html代码： &lt;div class="img_outer"&gt; &lt;img src="2.jpg"&g...
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、付费专栏及课程。

余额充值