制作隔行变色的表格

最新推荐文章于 2023-11-19 11:09:06 发布
最新推荐文章于 2023-11-19 11:09:06 发布
阅读量1.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qian_qian_123/article/details/84026711
版权

代码和包 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>制作隔行变色的表格</title>

		<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
		
		<script type="text/javascript">
					$(function(){
			$("tr:odd").css("background-color","#FFDEAD");
			$("tr:even").css("background-color","#FFEFD5");
			$("tr:first").css("background-color","#D2B48C");
			$("tr:last").css("background-color","#D2B48C");
		})
		</script>
	</head>

	<body>
		<table>
			<tr>
				<td>第一排</td>
				<td>第一排</td>
				<td>第一排</td>
				<td>第一排</td>
				<td>第一排</td>
			</tr>
			<tr>
				<td>第二排</td>
				<td>第二排</td>
				<td>第二排</td>
				<td>第二排</td>
				<td>第二排</td>
			</tr>
			<tr>
				<td>第三排</td>
				<td>第三排</td>
				<td>第三排</td>
				<td>第三排</td>
				<td>第三排</td>
			</tr>
			<tr>
				<td>第四排</td>
				<td>第四排</td>
				<td>第四排</td>
				<td>第四排</td>
				<td>第四排</td>
			</tr>
			<tr>
				<td>第五排</td>
				<td>第五排</td>
				<td>第五排</td>
				<td>第五排</td>
				<td>第五排</td>
			</tr>
			<tr>
				<td>第六排</td>
				<td>第六排</td>
				<td>第六排</td>
				<td>第六排</td>
				<td>第六排</td>
			</tr>
			<tr>
				<td>第七排</td>
				<td>第七排</td>
				<td>第七排</td>
				<td>第七排</td>
				<td>第七排</td>
			</tr>
			<tr>
				<td>第八排</td>
				<td>第八排</td>
				<td>第八排</td>
				<td>第八排</td>
				<td>第八排</td>
			</tr>
			<tr>
				<td>第九排</td>
				<td>第九排</td>
				<td>第九排</td>
				<td>第九排</td>
				<td>第九排</td>
			</tr>
		</table>

	</body>

</html>

 

笑笑师弟
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery——隔行变色和列表高亮显示的案例
mintsolace的博客
07-28 588
1.隔行变色：奇红偶黄 <script src="jquery-1.12.1.js"></script> <script> $(function(){ //点击按钮 $("#btn").click(function(){ $("#uu>li:ev...
隔行实现表格变色
Meat_doll的博客
07-14 299
老师上课讲的笔记
jQuery基础--制作隔行变色的商品列表
weixin_50419323的博客
10-27 2994
需求： 实现代码：
基于JavaScript实现表格隔行换色
11-21
表格隔行换色 需求分析 我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色 技术分析 table对象 集合 cells[]：返回包含表格中所有单元格的一个数组。 rows[]：返回包含表格中所有行的一个数组。 tBodies[]：返回包含表格中所有tbody 的一个数组。 步骤分析 确定事件: 文档加载完成 onload 2. 事件要触发函数: init() 3. 函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色 代码实现 <!DOCTYPE html> <html lang="en">
Javascript知识【案例：表格隔行换色】
若有所执，必有所成，心之所向，必显光芒
08-07 2673
案例：表格隔行换色
JavaScript制作表格隔行变色效果（新浪微博中的应用）
weixin_51415327的博客
09-02 436
<!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-Compatible" content="ie=edge"> <title>..
js实现表格隔行换色
SqlloveSyn的博客
12-27 974
js实现表格隔行换色
js实现隔行换色
xiaohua0708day的博客
11-19 594
2.获取元素：获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)。6.设置背景颜色(.style.backgroundColor)第一步：确定事件(onload)并为其绑定一个函数。5.获取奇数行和偶数行(对遍历中角标对2取余)第五步：获取奇数行和偶数行(角标对2取余)1.确定事件(页面加载事件onload)第六步：分别对奇数行和偶数行设置背景颜色。第四步：对tbody里面的行进行遍历。4.JS的遍历(for循环)第二步：书写函数(获取表格)
表格隔行变色
fdsal的博客
10-07 284
表格隔行变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
jquery选取商品隔行变色
09-22
在网页设计中，为了提升用户体验和视觉效果，我们经常需要...这个功能不仅可以用于商品列表，还可以应用于其他任何需要隔行变色的场景，如论坛帖子、表格数据等。理解并掌握这一技巧，有助于提升网页的交互性和美观度。
CSS2+JS实现table隔行变色
05-07
CSS2+JS实现table隔行变色,简单易懂，拿来改改就可以用
js 表格隔行颜色
01-19
通过判断是否为单数即可 然后设置下行的背景颜色就可以了 if(i%2==1) row.style.background = #CCCCff; else row.style.background = #CCCCCC; 具体请看下面的分析 用JS实现表格中隔行显示不同颜色 第一种： <style> tr{bgColor:[removed] this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow'); } </style> <table id=oTable width=100 border=1 style=bo
表格渲染(悬浮变色,隔行换色,点击变色)
09-08
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
利用JS动态生成隔行换色HTML表格的两种方法
10-17
主要介绍了利用JS动态生成隔行换色HTML表格的两种方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
jQuery动态生成隔行变色的table
04-27
jQuery动态生成隔行变色的table，使用jQuery+css+json实现
表格颜色自动隔行变色
11-15
"表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...
js表格变色制作表格隔行变色,滑过选中变色特效
10-27
为了提高用户的阅读体验，我们经常需要对表格进行美化，如隔行变色、鼠标滑过选中变色等特效。这些效果可以通过JavaScript（简称JS）实现，JS是一种强大的客户端脚本语言，能够在浏览器端动态操作HTML元素，实现丰富...
jquery table ui插件制作css表格隔行变色特效代码
11-11
本篇文章将详细解析如何使用`jQuery`与相关`CSS`来制作一个具有隔行变色效果的表格。 首先，`jQuery`是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画等功能。`Table UI`则是一类专门用于...
表格隔行变色2020/11/21
weixin_50286102的博客
11-21 603
onmouseover:鼠标经过事件 onmouseout:鼠标离开事件 元素 定义了一个包含数据的表格单元格 代表行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht.
jquery隔行变色表格
最新发布
11-29
以下是使用jQuery实现隔行变色表格的代码： ```javascript $(document).ready(function() { var table = $("#myTable"); // 获取表格元素 table.find("tr:even").css("background-color", "#f2f2f2"); // 选择偶数...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值