jQuery实现表格隔行换颜色：

最新推荐文章于 2024-07-13 15:29:04 发布
最新推荐文章于 2024-07-13 15:29:04 发布
阅读量69 收藏
点赞数
文章标签： java javascript ViewUI

jQuery实现表格各行换颜色：

截图如下：

代码如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>表格各行变色</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("tr:odd").addClass("odd");	<%--为基数行添加样式--%>
		$("tr:even").addClass("even");	<%--为偶数行添加样式--%>
	});	
</script>
<style type="text/css">
	.even{
		background: #ffcccc;	<%--定义偶数行样式--%>
	}
	.odd{
		background: #66cccc;	<%--定义基数行样式--%>
	}
</style>
</head>

<body>
<table width="383" height="257" border="1" align="center">
	<tr>
		<td width="121"><div align="center">学号</div></td>
		<td width="171"><div align="center">姓名</div></td>
		<td width="139"><div align="center">专业</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
	<tr>
		<td><div align="center">0101</div></td>
		<td><div align="center">小城</div></td>
		<td><div align="center">小学教育</div></td>
	</tr>
</table>
</body>
</html>
</span>


chinasxdtzhaoxinguo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery表格的隔行变色
m0_57202083的博客
08-26 340
:even偶数行样式 :odd 奇数行样式 :contains('包含') <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.6.0.js"></script> </head> <body> <ta...
html隔行变色代码,jQuery 表格隔行变色代码[修正注释版]
weixin_33002763的博客
06-20 236
jquery 奇偶变色$(document).ready(function() {$('tr').addClass('odd');$('tr:even').addClass('even'); //奇偶变色，添加样式});#hacker tr:hover{background-color:red; //使用CSS伪类达到鼠标移入行变色的效果，比Jquery 的mouseover,hover 好用}....
jQuery--表格隔行变色
qq_52567967的博客
09-27 2284
jQuery--表格隔行变色
用JQuery实现表格隔行换颜色
热门推荐
suntanyong88的专栏
09-20 2万+
最近在学习Jquery，其实很多论坛中都有一个特点就是每张贴都是隔行换颜色的，相信这点大家可能发现。那么怎样实现这种功能呢。方法有3种：     方法一：使用CSS样式，定义两个类的样式，分别使用到表格中。这种方法想法简单，相信很多人都想到。但是这样做很麻烦，如果表格很多工作量
jQuery实现表格隔行换色
10-18
总结，jQuery 实现表格隔行换色和鼠标悬停颜色变化涉及到以下知识点： - jQuery 选择器（`:odd` 和 `:even`） - jQuery 的 `css()` 方法 - JavaScript 事件处理（`onmouseover` 和 `onmouseout`） - JavaScript 中 `...
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
10-22
在这个例子中，我们将深入探讨如何使用jQuery创建一个插件，以实现表格隔行变色以及鼠标滑过时的高亮显示效果。 首先，我们来看一下基本的HTML结构，这里包含了一个简单的表格，用于展示插件的效果： ```html ...
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
10-21
在本教程中，我们将探讨如何利用 jQuery 来实现表格的隔行变色、滑动变色以及点击变色功能。这些技巧能够使网页中的表格更加美观且交互性更强。 首先，我们要明白jQuery中的`$(document).ready()`函数，它表示当...
使用JQ完成表格隔行换色的简单实例
12-02
总的来说，通过jQuery实现表格隔行换色是前端开发中常见的一种优化手段。它利用了jQuery的选择器功能和CSS的类应用，使得代码更简洁，同时提高了可维护性。在实际项目中，可以根据需求选择直接使用JavaScript设置...
jQuery实现table表格鼠标经过隔行换颜色特效代码.zip
11-18
"jQuery实现table表格鼠标经过隔行换颜色特效代码"是一个实用的例子，展示了如何利用jQuery为HTML表格添加交互性，使得用户在鼠标悬停在表格行上时，能动态改变行的背景色，提高用户体验。 首先，我们需要了解HTML...
jquery实现表格隔行换色和鼠标经过提示效果源码
07-03
jquery实现表格隔行换色和鼠标经过提示效果源码
jQuery实现表格隔行变色案例
qq_42918876的博客
06-29 1664
jQuery实现表格隔行变色案例html结构js代码部分效果如图 其实挺简单的，思路就是，创建一个table，然后给偶数行和奇数行赋不同背景颜色。 html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
使用jQuery完成表格隔行换色
qq_41566772的博客
10-31 268
addClass(class):为每个匹配的元素添加指定的类名。 HTML 代码: &lt;p&gt;Hello&lt;/p&gt; jQuery 代码: $("p").addClass("selected"); 结果: [ &lt;p class="selected"&gt;Hello&lt;/p&gt; ]   &lt;!DOCTYPE html&a
Jquery 表格分行变色
微尘的世界
08-19 150
http://bbs.blueidea.com/thread-2853109-1-1.html   jQuery新手教程，高手勿笑。————————————————————为了能够更清晰的显示表格中的数据，使用双色表格来显示数据的例子已经屡见不鲜了。我们通常都是使用JavaScript来实现这种效果，可是你知道jQuery中该如何做吗？用jQuery的语句重复JavaScript实现方法吗？不...
jQuery隔行换色
ahao4311的博客
02-20 274
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-2.1.0.min.js"></s...
jQuery实现表格隔行变色
叶为正的博客
11-06 4588
隔行变色 在很多项目中，当然可以避免使用table，而使用div来替代，但是为了能够快速的交付项目，而且对网络优化以及搜索引擎没有太高的妥协的话，我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员，技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。 这里要注意几个
使用jQuery实现表单隔行换色
聆听
01-11 5231
jQuery的基本过滤选择器： odd：匹配所有索引值为奇数的元素，从0开始计数 even：匹配所有索引值为偶数的元素，从0开始计数 我们用到了jQuery所有需要jQuery的js <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="U...
java学习----递归
最新发布
qq_56798493的博客
07-13 162
【代码】java学习----递归。
jquery表格隔行变色
01-04
以下是两种实现jQuery表格隔行变色的方法： 1. 使用each()方法遍历表格行，并根据索引值判断是否为偶数行，然后使用css()方法设置背景颜色。 ```javascript $(document).ready(function() { var table = $("#...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值