一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现

最新推荐文章于 2022-04-27 15:18:37 发布
最新推荐文章于 2022-04-27 15:18:37 发布
阅读量105 收藏
点赞数
文章标签： javascript ViewUI
经常性的会需要使用表格显示一些东西，当表格比较大的时候一眼望去脑袋可能会有些晕，经常性的因为没看准行而出现误操作，一般解决办法是交替行变行或者鼠标划过行变色，第一个太简单就不说了，第二个也很简单，但每个人都有不同的实现方法，下面给一个比较简洁的做法，支持IE6、IE7、FF2，其他浏览器未测试（可以扩展一下用到ASP.NET的GridView里）：
<!-- 博客园 丁学 http://www.cnblogs.com/dingxue 2007.8.9 -->
<!-- 鼠标划过表格行变色－简洁实现－支持IE6、IE7、FF2，其他浏览器未测试 -->
<html>
<head>
 <title>鼠标划过表格行变色－简洁实现</title>
 <style type="text/css">
   #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
   #tb th{background:#EEE;border-bottom:1px solid #CCC;padding:4px;}
   #tb td{border:1px solid #EEE;padding:4px;}
 </style>
</head>
<body>
<table id="tb">
 <tr>
   <th>商品名称</th>
   <th>单价</th>
   <th>库存数量</th>
   <th>货位</th>
 </tr>
 <tr>
   <td> 丁学最喜欢的仙四豪华版-菱纱版</td>
   <td>139</td>
   <td>10000000</td>
   <td>A12-253</td>
 </tr>
 <tr>
   <td>仙四豪华版-梦璃版</td>
   <td>139</td>
   <td>10000000</td>
   <td>A12-254</td>
 </tr>
 <tr>
   <td>仙四普通版-首发</td>
   <td>69</td>
   <td>10000000</td>
   <td>A12-255</td>
 </tr>
</table>
<script type="text/javascript">
 var obj=document.getElementById("tb");
 for(var i=0;i<obj.rows.length;i++){  //循环表格行设置鼠标事件：丁学 http://www.cnblogs.com/dingxue
   obj.rows[i].οnmοuseοver=function(){this.style.background="#0EF";}
   obj.rows[i].οnmοuseοut=function(){this.style.background="";}
 }
</script>

效果如下：

商品名称单价库存数量货位
丁学最喜欢的仙四豪华版-菱纱版13910000000A12-253
仙四豪华版-梦璃版13910000000A12-254
仙四普通版-首发6910000000A12-255
weixin_33874713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
超简单表格隔行换色+鼠标点击变色
流程管理软件
11-20 792
 #senfe { width: 300px; border-top: #000 1px solid; border-left: #000 1px solid;}#senfe td { border-right: #000 1px solid; border-bottom: #000 1px solid;}-->function senfe(o,a,b,c,d){ var t=document.g
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面
VX_WJ88950106的博客
08-08 9106
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景......
鼠标经过表格变色
11-15
通过jquery给经过的表格设置css背景变色效果
鼠标经过时整行变色的表格
weixin_34358365的博客
10-13 190
<title>鼠标经过时整行变色的表格</title><style>table{color:#565;font:12px Arial, Helvetica, sans-serif;}td{ border-bottom:2px solid #b3de94;border-top:3px solid #fff;padding:9px;}tr{background...
CSS:当鼠标移动到表格的某一行时改变其背景颜色
weixin_30426879的博客
03-10 1382
效果： 鼠标没有指向任何一行时： 当鼠标指向其中一行时： 代码: html: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
10-30
通过上述知识点，我们可以看到一个简单的表格样式增强实现，其实是包含了对前端设计、跨浏览器兼容性和用户体验的周全考虑。在技术快速发展的今天，这些基础知识点仍然是开发者需要掌握的技能。
鼠标经过时整行变色
weixin_30649859的博客
03-09 132
转自：http://www.cnblogs.com/yzst/archive/2011/10/13/2209684.html <html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标经过时整行变色</title>...
鼠标悬浮修改表格背景颜色（js/css）
heart_is_broken的博客
11-02 1176
<!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>鼠标
鼠标悬浮在表格上，所在行变色
qq_48964916的博客
06-25 531
控制选中行的背景颜色 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 )则表示完全不透明度的黑色 ...
键盘方向键移动表格中的光标(包含鼠标选择)
02-17
键盘方向键移动表格中的光标(包含鼠标选择) 通过键盘方向键←↑→↓移动表格中的选中光标,改变选中的颜色.也可以使用鼠标选择.
CSS实现table表格鼠标滑过（悬浮）改变颜色
美奇软件开发工作室
10-15 4338
效果图： 其实很简单，就一行css代码： tbody tr:hover{ cursor:pointer; background-color: rgba(35,198,200,0.3); } 前面添加了tbody表示只作用到表格主体部分，标题不会改变颜色。
vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色、vue表格的隔行变色修改背景颜色
李程程的博客
06-01 1万+
vue表格根据属性值设置背景颜色、vue表格设置鼠标悬浮背景颜色第一种方法：row-class-name第二种方法：cell-class-name第三种方法：（cell-class-name和row-class-name）都可以第一种方法代码第二种方法代码第三种方法代码 第一种方法：row-class-name 使用row-class-name时当鼠标悬浮上去时背景将会变色（表格默认） 第二种方法：cell-class-name 使用cell-class-name时鼠标悬浮上去后不会改变背景颜色 第三
JavaScript如何实现鼠标悬浮适表格对应行变色？
黑马程序员官方博客
04-27 1227
我们需要通过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
html表格鼠标划过变色,表格鼠标经过显示一行背景变色（简单实现）
weixin_35714534的博客
06-22 1815
实现思路核心代码：利用鼠标经过事件(onmouseover)和鼠标离开(onmouseout)事件。css代码table {border: 1px solid black;}table td {border: 1px solid black;}.bgc {background-color: pink;}html代码测试数据212312323231312231asdfqreqqwer12qe321r...
CSS实现鼠标滑过表格变色
weixin_33862041的博客
01-12 444
每个单元格变色： <style type="text/css"> <!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")} td {background-color:expression((this.cellIndex%2==0)?"":((t...
tr:hover变色的问题
简单快乐
11-03 6854
css tr 变色
Java从入门到精通 - Swing表格JTable选中行及列的位移
叮当小马的专栏
09-03 4976
import java.awt.BorderLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.Vector; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JScrollPane; import
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
HTML表格：鼠标悬停行动态变色效果实现
"该资源提供了一个HTML表格的示例，实现了当鼠标悬停在表格行上时，行颜色会随之改变的功能，以增强用户交互体验和视觉辨识度。" 在网页设计中，表格（Table）是一种常见的数据展示方式。在本示例中，我们看到一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值