jQuery实现table表格隔行换色鼠标经过变色

最新推荐文章于 2021-08-19 16:36:26 发布
最新推荐文章于 2021-08-19 16:36:26 发布
阅读量752 收藏 1
点赞数
分类专栏： ajax js
js 同时被 2 个专栏收录
60 篇文章 0 订阅
订阅专栏
ajax
26 篇文章 0 订阅
订阅专栏 
//初学者可以看下挺简单的实现方法

<!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=utf-8" />
<title>隔行变色</title>
<style type="text/css">
.one{
	background:#C00;
	}
.two{
		background:#09F;
	}
.three{
		background:#039;
	}
.four{
		background:#FFF;
		}
</style>
<script type="text/javascript" language="javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	      
	$("tr").mouseover(function(){
		$(this).addClass("four");
		})
	$("tr").mouseout(function(){
		$(this).removeClass("four");
		})
	$("tr:first").addClass("three");
	$("tr:last").addClass("three");
	$("tr:even").addClass("one");
	$("tr:odd").addClass("two");
	});
</script>
</head>
<body>
<table width="300" border="1" class="table_gehang">
  <tr class="title">
    <td>你好吗</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>


jaray
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一天搞定jQuery(二)——使用jQuery表格的隔行换色
05-10
一天搞定jQuery(二)——使用jQuery表格的隔行换色
jQuery实现table隔行换色和鼠标经过变色的两种方法
10-25
其中，操作表格（table）的视觉样式如隔行换色和鼠标经过变色是前端开发者经常要处理的场景。接下来，我们将从技术角度详细解读如何使用jQuery实现这两种效果。 首先，我们讨论如何实现table的隔行换色。隔行换色的...
jQuery实现table隔行换色和鼠标经过变色
itmyhome的专栏
06-14 8451
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实现HTML表格隔行变色及鼠标悬停变色效果
hftyhv的博客
11-15 578
jQuery实现HTML表格隔行变色及鼠标悬停变色效果
用JQuery实现表格隔行换颜色
nature_fly088的专栏
10-19 1496
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种： 方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量就很大。这种方法也是局限在静态添加。如果要用到动态添加数据，相信大家就可以想像到。。。。 方法二：使用javascript，就
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
10-26
在这个具体的案例中，我们使用的插件将帮助我们实现表格隔行换色以及鼠标悬停时改变行的背景颜色。 隔行换色是通过为表格中的偶数行（或者奇数行，取决于设计需求）设置特定的背景色来实现的。在上述内容中，通过...
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
10-20
在本文中，我们将探讨如何使用jQuery技术实现网页上表格的隔行变色效果，以及如何高亮显示当前用户选择的行。这个过程涉及到了jQuery对于表格元素的遍历、样式调整和事件处理等操作技巧。 首先，我们需要了解表格的...
隔行换色鼠标指向表格换色
qq_45593083的博客
10-27 244
<script language="JavaScript" src="jquery-3.4.1.min.js"></script> <title>隔行换色鼠标指向表格换色</title> </head> <body> <table> <thead> <tr> ...
jQuery表格插件（隔行换色、划过变色、全选）
macrohui29的专栏
11-16 789
//by:xcl @2012.8  qq:80213876 ;(function ($) {      $.extend({         XCLTableList:function(options){             options = $.extend({},funs.Defaults, options);             funs.Init(options);
用jquery实现表格的隔行变色
youngerhao的专栏
03-20 833
简单选择器学习 //使用jquery加载事件 $(document).ready(function (){ $("tr:even").css("background","#ffff99"); $("tr:odd").css("background","#cccccc"); });       姓名     性别
学习编写jquery插件—美化表格
H小志
09-21 1221
当了这么久的码农，也用了无数次别人写的插件，是时候该学习学习自己动手写插件了。今天先借用别人写的超简单、实用的美化表格小插件，来学习下jquery插件的编写。 写插件之前先想好插件要实现的功能，这里写的美化表格插件就是让表格的奇偶行颜色不同，然后鼠标移到某行上，某行可以高亮显示。 接下来想想插件的实现原理，美化表格无非就是找到表格的奇偶行，然后添加不同的class，活动行高亮显示也很简单，只要
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=.
隔行换色并且鼠标指向行变色的表格
实践求真知
04-12 1951
一 应用 对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时，可以为表格添加隔行换色并且鼠标指向行变色功能。   二 代码 table{ border:0;border-collapse:collapse;} /*设置表格整体样式*/ td{font:normal 12px/17px Arial;padding:2
Jquery实现表格的隔行换色和鼠标悬停单元格变色
qq_41734885的博客
06-19 1869
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;使用JQ完成表格的隔行换色&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquer
jQuery实现表格隔行变色
叶为正的博客
11-06 4596
隔行变色 在很多项目中，当然可以避免使用table，而使用div来替代，但是为了能够快速的交付项目，而且对网络优化以及搜索引擎没有太高的妥协的话，我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员，技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。 这里要注意几个
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、付费专栏及课程。

余额充值