鼠标经过时变色的表格

最新推荐文章于 2024-01-06 15:06:54 发布
最新推荐文章于 2024-01-06 15:06:54 发布
阅读量101 收藏
点赞数
分类专栏： xhtml&css 文章标签： Mobile JavaScript ViewUI 
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
 border:1px solid #0058a3; 
 font-family:Arial;
 border-collapse:collapse; 
 background-color:#eaf5ff; 
 font-size:14px;
}
.datalist caption{
 padding-bottom:5px;
 font:bold 1.4em;
 text-align:left;
}
.datalist th{
 border:1px solid #0058a3; 
 background-color:#4bacff; 
 color:#FFFFFF;    
 font-weight:bold;
 padding-top:4px; padding-bottom:4px;
 padding-left:12px; padding-right:12px;
 text-align:center;
}
.datalist td{
 border:1px solid #0058a3; 
 text-align:left;
 padding-top:4px; padding-bottom:4px;
 padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
 background-color:#c4e4ff; 
}
-->
</style>
   </head>
<body>
<table class="datalist" summary="list of members in EE Studay">
 <caption>Member List</caption>
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Class</th>
  <th scope="col">Birthday</th>
  <th scope="col">Constellation</th>
  <th scope="col">Mobile</th>
 </tr>
 <tr>
  <td>isaac</td>
  <td>W13</td>
  <td>Jun 24th</td>
  <td>Cancer</td>
  <td>1118159</td>
 </tr>
 <tr>
  <td>girlwing</td>
  <td>W210</td>
  <td>Sep 16th</td>
  <td>Virgo</td>
  <td>1307994</td>
 </tr>
 <tr>
  <td>tastestory</td>
  <td>W15</td>
  <td>Nov 29th</td>
  <td>Sagittarius</td>
  <td>1095245</td>
 </tr>
 <tr>
  <td>lovehate</td>
  <td>W47</td>
  <td>Sep 5th</td>
  <td>Virgo</td>
  <td>6098017</td>
 </tr>
 <tr>
  <td>slepox</td>
  <td>W19</td>
  <td>Nov 18th</td>
  <td>Scorpio</td>
  <td>0658635</td>
 </tr>
 <tr>
  <td>smartlau</td>
  <td>W19</td>
  <td>Dec 30th</td>
  <td>Capricorn</td>
  <td>0006621</td>
 </tr>
 <tr>
  <td>whaler</td>
  <td>W19</td>
  <td>Jan 18th</td>
  <td>Capricorn</td>
  <td>1851918</td>
 </tr>
 <tr>
  <td>shenhuanyan</td>
  <td>W25</td>
  <td>Jan 31th</td>
  <td>Aquarius</td>
  <td>0621827</td>
 </tr>
 <tr>
  <td>tuonene</td>
  <td>W210</td>
  <td>Nov 26th</td>
  <td>Sagittarius</td>
  <td>0091704</td>
 </tr>
 <tr>
  <td>ArthurRivers</td>
  <td>W91</td>
  <td>Feb 26th</td>
  <td>Pisces</td>
  <td>0468357</td>
 </tr>
 <tr>
  <td>reconzansp</td>
  <td>W09</td>
  <td>Oct 13th</td>
  <td>Libra</td>
  <td>3643041</td>
 </tr>
 <tr>
  <td>linear</td>
  <td>W86</td>
  <td>Aug 18th</td>
  <td>Leo</td>
  <td>6398341</td>
 </tr>
 <tr>
  <td>laopiao</td>
  <td>W41</td>
  <td>May 17th</td>
  <td>Taurus</td>
  <td>1254004</td>
 </tr>
 <tr>
  <td>dovecho</td>
  <td>W19</td>
  <td>Dec 9th</td>
  <td>Sagittarius</td>
  <td>1892013</td>
 </tr>
 <tr>
  <td>shanghen</td>
  <td>W42</td>
  <td>May 24th</td>
  <td>Gemini</td>
  <td>1544254</td>
 </tr>
 <tr>
  <td>venessawj</td>
  <td>W45</td>
  <td>Apr 1st</td>
  <td>Aries</td>
  <td>1523753</td>
 </tr>
 <tr>
  <td>lightyear</td>
  <td>W311</td>
  <td>Mar 23th</td>
  <td>Aries</td>
  <td>1002908</td>
 </tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName_r('tr');
for (var i=0;i<rows.length;i++){
 rows[i].onmouseover = function(){  //鼠标在行上面的时候
  this.className += 'altrow';
 }
 rows[i].onmouseout = function(){  //鼠标离开时
  this.className = this.className.replace('altrow','');
 }
}
</script>
</body>
</html>

 

booucn
关注
专栏目录
JavaScript实现鼠标经过表格某行时此行变色
01-21
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下 表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。 <!DOCTYPE ...
js实现鼠标经过表格行变色的方法
10-24
在网页开发中，有时我们需要为用户提供更加友好的交互体验，例如当用户鼠标经过表格行时，改变行的背景颜色以突出显示。这个功能可以通过JavaScript实现，结合HTML表格和CSS样式，以及JavaScript的事件监听机制。...
表格隔行变色
pengpeng11的专栏
01-24 147
[code="html"] List Member List Name Class Birthday Constellation Mobile isaac W13 Jun 24th Cancer 1118159 girlwing W210 ...
html 鼠标经过表格列,JavaScript实现鼠标经过表格某行时此行变色
weixin_42531516的博客
06-04 856
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。鼠标经过表格变色table {margin: 200px auto;font-size: 12px;border-collapse: collapse;width: 500px;height: 50px;}table ...
鼠标指针经过时背景变色
M10_26的博客
04-21 485
当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然。
【JavaScript】鼠标经过表格变色
汤圆小丸叽的博客
09-10 872
<!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" /> <titl
html表格鼠标划过变色,表格鼠标经过显示一行背景变色（简单实现）
weixin_35714534的博客
06-22 1840
实现思路核心代码：利用鼠标经过事件(onmouseover)和鼠标离开(onmouseout)事件。css代码table {border: 1px solid black;}table td {border: 1px solid black;}.bgc {background-color: pink;}html代码测试数据212312323231312231asdfqreqqwer12qe321r...
表格鼠标经过时变色
hw1287789687的专栏
02-08 601
如何实现鼠标经过时变色呢? 如图:  ------------------------------------ 如何实现鼠标放在上面时表格的行变色呢? 有如下两种方式: 方式一:使用纯css div.queryResultDiv table.productList tr:nth-child(n+2):hover { background-color: #B0D2FF; } ...
html中鼠标表格表格变色,JS代码实现表格选中后变色
weixin_31572321的博客
06-04 855
无标题页-学无忧(www.xue51.com)var searchResult=new Array();//鼠标滑过时显示背景色//改变背景色和边框颜色的方法function colorChange(table,color,color2){table.style.borderColor=color;table.style.backgroundColor=color2;}//鼠标移动过来后，更改颜色...
js实现鼠标经过表格变色
christmassss的博客
01-06 538
【代码】js实现 鼠标经过表格变色。
dw怎么做html鼠标变化,dw鼠标经过单元格变色 DW 鼠标经过表格 背景变色
weixin_39675963的博客
06-04 7906
DW 鼠标经过表格 背景变色DW怎样实现当鼠标经过表格时改变表格的背景颜色?又怎样应用到想要的行和列 或者某也单元格?。。。给你想要改颜色的单元格取得名字,然后在行为里添加一个onMouseOver事件,事件内容为改变属性,在改变属性对话框中选择刚才取名字的那个单元格,将backgroundColor属性改成你要的就行了,同样再添加一个onMouseOut事件.Dreamweaver中 鼠标经过一...
html表格鼠标划过变色,CSS实现鼠标滑过表格变色
weixin_42511201的博客
06-22 1585
每个单元格变色：第1行第1列第2行第2列第3行第3列第4行第4列第5行第5列－－－－－－－－－－－－－－－－－－－－－－－－以上都用到expression，实现变得很方便，但是，经测试，在IE6(其它版本我不知道)上很正常，在firefox上无任何反应…… ，要想在firefox上也有此效果，就要用第二种方法(2)用JS鼠标滑过变色：window. showtable(){var tablenam...
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
10-27
本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性，使得数据更加清晰易辨。 首先，我们来讨论“表格隔行变色”。...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jquery实现table鼠标经过变色代码
10-26
"jQuery 实现 table 鼠标经过变色代码"就是一种常见的交互设计技巧，它可以使用户更容易注意到被鼠标悬停的表格行，从而引导用户更直观地操作和理解数据。下面我们将深入探讨如何使用 jQuery 实现这一效果，并解释...
stays mad 反PCL宣传库。Anti PCL pro.zip
10-31
stays mad 反PCL宣传库。Anti PCL pro
伊犁师范大学在四川2020-2024各专业最低录取分数及位次表.pdf
10-31
那些年，与你同分同位次的同学都去了哪里？全国各大学在四川2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
yolo算法-植物数据集-1417张图像带标签adamweeds.zip
最新发布
10-31
yolo系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值
clickhouse-jdbc驱动jar文件用于建立jdbc链接
10-31
clickhouse-jdbc驱动jar文件用于建立jdbc链接
HTML表格：鼠标悬停行动态变色效果实现
为了增加用户体验，通过CSS（Cascading Style Sheets）对表格行（TR）进行了样式设计，使得当鼠标指针移动到某一行时，行背景色会发生变化。 首先，创建了一个基本的HTML结构，包含一个ID为"tab"的表格元素。表格中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值