jquery实现鼠标滑过 table 行变色

最新推荐文章于 2023-12-18 19:28:46 发布
最新推荐文章于 2023-12-18 19:28:46 发布
阅读量693 收藏
点赞数
分类专栏： jquery


<html>
<head>
<style type="text/css">
.table-tr-title{
height: 26px;
font-size: 12px;
text-align: center;
}
.table-tr-content{
height: 18px;
background: #FFFFFF;
text-align: center;
font-size: 12px;
}
.normalEvenTD{
background: #DFD8D8;
}
.normalOddTD{
background: #FFFFFF;
}
.hoverTD{
background-color: #eafcd5;
height: 18px;
text-align: center;
font-size: 12px;
}
.trSelected{
background-color: #51b2f6;
height: 18px;
text-align: center;
font-size: 12px;
}
</style>
</head>
<body>
<table width="99%" class="list" style="word-break: break-all" border="0"
align="center" cellpadding="0" cellspacing="1" bgcolor="#c0de98">
<tr class="table-tr-title">
<td width="5%">标题</td>
<td width="5%">标题</td>
<td width="5%">标题</td>
<td width="5%">标题</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
<tr class="table-tr-content">
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
<td width="5%">数据</td>
</tr>
</body>
</html>

 

 


<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$(function(){
///datagrid选中行变色与鼠标经过行变色///
var dtSelector = ".list";
var tbList = $(dtSelector);

tbList.each(function() {
var self = this;
$("tr:even:not(:first)", $(self)).addClass("normalEvenTD"); // 从标头行下一行开始的奇数行，行数：（1，3，5...）
$("tr:odd", $(self)).addClass("normalOddTD"); // 从标头行下一行开始的偶数行，行数：（2，4，6...）

// 鼠标经过的行变色
$("tr:not(:first)", $(self)).hover(
function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); },
function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); }
);

// 选择行变色
$("tr", $(self)).click(function (){
var trThis = this;
$(self).find(".trSelected").removeClass('trSelected');
if ($(trThis).get(0) == $("tr:first", $(self)).get(0)){
return;
}
$(trThis).addClass('trSelected');
});
});
});
</script>

 

baidu_22257007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS设置鼠标滑过Table表格时，相应行的背景颜色
11-17 1万+
.table>tbody>tr:hover { background-color: #fff; }
table行随鼠标变色
游海东的技术专栏
05-06 2036
table行随鼠标变色 1、设计表格 工号 姓名 年龄 性别 2014010101 张峰
jquery实现table鼠标经过变色代码
10-26
table鼠标经过变色的效果想必大家都有见到过吧，其实实现很简单，在本文有个不错的示例，感兴趣的朋友可以学习下
jQuery插件，实现表格选中状态及鼠标滑过高亮
weixin_72426331的博客
11-06 449
(function($) { $.fn.extend({ "alterBgColor":function(options){ //设置默认值 options=$.extend({ odd:"odd", /* 偶数行样式*/ even:"even", /* 奇数行样式*/ selected:"selected" /* 选中行样式*/ },options);上边提到的$.extend(item)说是为Jquery类添加了静态方法，那么这里的$.fn.extend(item)就是为每一个实例添加一个实例方法了。
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化。
猫叔的专栏
08-28 6838
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果图如下： 源码（Demo）打包免积分下载地址：http://download.csdn.net/detail/yangwei19680827/6025045 html代码如下： .table-tr-title{ height: 26px; font-size: 12px; text-align: c
element 鼠标滑过table表格 字体变色 背景色变颜色实现
weixin_73337633的博客
12-18 591
【代码】element 鼠标滑过table表格 字体变色 背景色变颜色实现。
jQuery实现table隔行换色和鼠标经过变色
itmyhome的专栏
06-14 8437
jQuery实现table隔行换色和鼠标经过变色 一、隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定： $("table tr:nth-child(odd)").css("background-color","#eeeeee"); 二、鼠标经过变色 $("tr").live({ mouseover:function(){ $(this).
jQuery实现鼠标滑过行变颜色的表格
weixin_46528860的博客
10-12 1364
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 鼠标经过行变色
代码改变生活
01-11 1952
.hover {             background-color: #ff0000;         } 方法1:  $(document).ready(function () {             $("tr").bind("mouseover", function () {                 $(this).css("backg
jQuery实现鼠标滑过鼠标变色功能
06-10
在本教程中，我们将深入探讨如何利用jQuery实现一个功能：当鼠标滑过表格时，使得行背景色发生变化，即所谓的“鼠标悬停高亮”效果。这个效果可以提升用户体验，帮助用户更清楚地识别和跟踪选中的表格行。 首先，...
jquery table鼠标滑过隔行变色表格样式代码
10-29
jQuery 与 HTML 表格（table）的结合可以实现许多实用的功能，如本例中的“鼠标滑过隔行变色”效果。这种效果能够提升用户的交互体验，使得用户在浏览数据密集型表格时更容易区分每一行。 要实现这个功能，我们需要...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
这样，表格就会根据配置自动应用隔行变色和鼠标滑过高亮效果。这个插件的灵活性在于，你可以通过传递不同的配置对象来定制样式类，以适应不同的设计需求。 总结来说，这个jQuery插件的核心功能包括： 1. 根据行的...
table鼠标经过时整行变色 jquery
04-20
table鼠标经过时整行变色 jquerytable鼠标经过时整行变色 jquery
jquery 写得不错的table鼠标经过变色
ICode联盟
09-25 924
$('# tr:not(:has("th"))').hover(function () {             $bg = $(this).css('background-color');             $(this).css('background-color', '#ffc4c6');         },         function () {          
HTML中实现鼠标经停整行(tr)变色
热门推荐
ljgllxyz的专栏
08-17 2万+
在网页制作的过程中有时候要实现那种在鼠标经过一个表格的某一行的时候，要整行的背景颜色发生变化，以表明该行正中焦点，网上有一大堆这方面的代码，但是好多都还要加上一大堆得javascript代码，本人再次自己写了个简单实用的小代码 1.首先在之前插入这么一段代码 tr.change:hover { background-color:#00FF00 } 然后再要变色的表格处的标签
jQuery实现table隔行换色和鼠标经过变色的两种方法
zgphacker2010的专栏
03-30 877
参考代码： 一、隔行换色 $("tr:odd").css("background-color","#eeeeee"); $("tr:even").css("background-color","#ffffff"); 或者一行搞定： $("table tr:nth-child(odd)").css("background-color","#eeeeee"); :nth-child...
jQuery实现HTML表格隔行变色及鼠标悬停变色效果 .
珍惜所有的一切
12-31 2848
以下代码实现效果：1.表格隔行变色。2.鼠标悬停在表格行上时变色。 一：在页面内引入jquery.js。我使用的是jquery-1.6.min.js。 二：加入如下js代码   //隔行变色 $(document).ready(function(){ $(".stripe_tb tr").mouseover(function(){ //如果鼠标移到cla
jq鼠标经过变色
u013223091的专栏
03-19 1286
$(document).ready(function() { // $("li").bind("mouseover", function(){ // $(this).css("color","red"); //});bind可以该on $("li").mouseover(function () { $(this).css("color
jQuery案例--鼠标悬停时变色
qq_43712409的博客
11-14 2060
<!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实现鼠标移动变色
最新发布
12-29
以下是使用jQuery实现鼠标移动变色的示例代码： ```javascript $(document).ready(function(){ $("body").mousemove(function(event){ var x = event.pageX; var y = event.pageY; var color = "rgb(" + x%255 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值