【JQuery】鼠标经过表格行变色

最新推荐文章于 2021-08-19 16:36:26 发布
最新推荐文章于 2021-08-19 16:36:26 发布
阅读量116 收藏
点赞数
分类专栏： JavaScript\JQuery 文章标签： jQuery CSS XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luckyjaky/article/details/83361591
版权
[color=darkred][/color]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery鼠标经过表格行变色</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<!-- 上面的js是JQuery -->
<script type="text/javascript">
$(function(){ //文档加载
$("#tb").width(520); //设置表格宽度为520像素
$("#tb").height(250); //设置表格的高度为250像素
$("#tb").css("background-color","#000000"); //设置表格背景颜色为黑色
$("tr").attr("bgColor","#FFFFFF"); //添加表格行的背景属性并设置为白色，注意这里的属性不是bgcolor而是bgColor
$("td").append(" "); //在所有单元格上添加空格
$("tr").hover(
function(){
$(this).addClass("hover"); //鼠标经过添加hover样式
},
function(){
$(this).removeClass("hover"); //鼠标离开移除hover样式
}
);
});
</script>
<style type="text/css">
.hover{background-color:#FF0000;} /*这里是鼠标经过时的颜色*/
</style>
</head>
<body>
<table id="tb" border="0" cellpadding="0" cellspacing="1">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>

注意：请不要给单元格设置指定的颜色。否则无法变色！
luckyjaky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现鼠标滑过行变颜色的表格
weixin_46528860的博客
10-12 1367
jQuery 第一章 jQuery入门 作业1： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/index.css" /> <title></title> </head> <body> <table> <tr st..
JQuery鼠标经过表格行变色
数元技术博客
06-05 157
[code="html"] JQuery鼠标经过表格行变色 $(function(){ //文档加载 $("#tb").width(520); //设置表格宽度为520像素 $("#tb").height(250); //设置表格的高度为250像素 $("#tb").css(...
jQuery 实现鼠标扫过课表变颜色
weixin_44717047的博客
06-26 225
jQuery 实现鼠标扫过课表变颜色
自定义一个jquery插件,改变鼠标滑过时的颜色
LPLIFE的博客
05-23 370
&lt;！DOCTYPE html&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;meta charset =“UTF-8”&gt; &lt;TITLE&gt; &lt;/ TITLE&gt; &lt;script type =“text / javascript”src =“js / jquery.min.js”&g
jquery实现table鼠标经过变色代码
10-26
"jQuery 实现 table 鼠标经过变色代码"就是一种常见的交互设计技巧，它可以使用户更容易注意到被鼠标悬停的表格行，从而引导用户更直观地操作和理解数据。下面我们将深入探讨如何使用 jQuery 实现这一效果，并解释...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery鼠标移动表格变色及修改单元格值
03-21
标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能，当鼠标在HTML表格上移动时，所经过的单元格会改变颜色，并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...
jQuery 鼠标移动到表格变色特效
06-14
总之，"jQuery 鼠标移动到表格变色特效"是一个利用jQuery处理鼠标事件并改变元素样式的实例，通过学习这个例子，开发者可以掌握jQuery的基本用法，了解如何结合CSS实现交互效果，这对于创建动态、响应式的网页界面至...
jQuery实现鼠标滑过鼠标变色功能
06-10
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
JQuery实现table隔行变色及鼠标滑动变色
态度决定思路，思路决定出路！！！
09-22 2260
1.实例： jquey实现表格隔行变色及鼠标滑过变色.html $(function(){ //添加tr基数背景色样式 $("#title tr:even").css("background","#999"); //even:设置tr基数背景色 $("#title tr:even"
JQuery 鼠标移动Table行变色
zhuyu19911016520
09-19 1419
$(function () {             //获取Table的ID为GridView1，找到tr，添加移动事件，移动到哪行则哪行添加样式，兄弟行则移除样式             $("#GridView1 tbody tr").mouseover(function () {                 $(this).addClass("mousetrans").sibl
jQuery案例--鼠标悬停时变色
qq_43712409的博客
11-14 2066
<!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...
jQuery实现table表格隔行换色鼠标经过变色
席伟娜的专栏
03-19 4635
//初学者可以看下挺简单的实现方法 隔行变色 .one{ background:#C00; } .two{ background:#09F; } .three{ background:#039; } .four{ background:#FFF; } $(document).ready(function(){ $("tr").mous
jQuery实现鼠标移动到表格上时变色
java_min的专栏
04-10 3486
"http://www.w3.org/TR/html4/loose.dtd"> http://www.w3.org/1999/xhtml">                                              th{           background: #0066FF;           color:#FFFFFF;
Jquery-01-隔行换色鼠标指向表格并且行变色
此后如竟没有炬火我便是唯一的光
08-19 1061
<!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"> <script src=.
jquery鼠标移入变色移出恢复
热门推荐
u010999809的博客
10-02 1万+
一、需求说明 现需要对一个表格的内容部分做下高亮处理：当鼠标放到这一行时，背景色发生改变；当鼠标移出这一行时，恢复这一行的原有背景色。如下图，原来是除了首行以外，带序号的内容部分，奇偶行背景色交替变化，当鼠标放到第1行时，看到下图的样式，移出该行后，恢复原样。 二、代码实现 table及样式部分： &lt;style type="text/css"&gt; #studentTabl...
jquery动态添加的表格行鼠标经过时候改变行的背景颜色
dahuzi的专栏
07-31 5319
遇到个小意外。 问题：我的表格是 用append()动态添加的表格行，实现表格鼠标经过 行 时候高亮显示，用bind(),或者.mouseover()+.mouseout()方法不起作用 $("tr").bind("mouseover",function(){ $(this).css("background-color","#FFF"); }); $("tr").bind("mou
jquery表格隔行变色和当前行变色
最新发布
04-11
根据描述，似乎您是问如何使用jQuery改变表格行的颜色和当前行的颜色。 要改变表格行的颜色，可以选择使用CSS或jQuery。如果选择使用CSS，则可以使用以下代码： ``` tr { background-color: #ddd; } ``` 如果选择使用jQuery，则可以使用以下代码： ``` $("tr").css("background-color", "#ddd"); ``` 要改变当前行的颜色，可以在jQuery中使用以下代码： ``` $("tr").click(function(){ $(this).css("background-color", "#ddd"); }); ``` 这将使当前被单击的行变为灰色。您可以更改颜色代码以符合您的需要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值