表格的隔行变色，实现方法

表格中的隔行变色，很常见

1.css3实现：pc端现在支持的不多

table li:nth-of-type(odd){background:#FAFAFA;}/*奇数行*/
table li:nth-of-type(even){background:#FAFAFA;}/*偶数行*/

2.jquery 实现 :兼容大部分的浏览器

$("tr:odd").css("background-color","#FAFAFA");
$("tr:even").css("background-color","#FAFAFA");

时间： 2024-10-28 20:40:40

表格的隔行变色，实现方法的相关文章

表格(Table)隔行变色

在ASP.NET的Repeater控件,实现隔行变色,是极简单的事情.因为它有ListItemType.Item和ListItemType.AlternatingItem模版.如果在普通的表格(Table)来实现隔行变色,就得使用css样式与jQuery来解决.先来看看原始的表格样式: 打开视图: 在视图中,添加样式: 由于此视图是使用.getJSON()异步加载数据,因此得在加载完成之后,得马上给这个动态的表格添加上面的样式: 网页运行后的效果:

8月7日使用Jquery做表格的隔行变色,点击事件

首先,在php中引入Jquery,之后就可写代码了: <script type="text/javascript"> $(document).ready(function(e){ $("tr").each(function(i){ this.style.backgroundColor = ["#ccc","#fff"][i%2] }); }); </script> 同理,也可做隔单元格变色. 也可使用c

利用jQuery实现表格的隔行变色、高亮显示

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">table{text-align: center;font-weight: bold;}tr{height: 32px;}</style><script src="jquery-1.8

(转)适用微信小程序的table表格(带隔行变色)

原文地址 table.wxml <view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </v

10.2 隔行变色的表格

本案例中,我们对一个简单的表格进行设置,使它看起来更为精致.另外,当表格的行和列都很多,并且数据量很大的时候,为避免单元格采用相同的背景色会使浏览者感到凌乱,发生看错行的情况,为表格设置隔行变色的效果,使得奇数行和偶数行的背景颜色不一样.实例的最终效果如图1所示. 实例文件位于网页学习网CSS教程资源的“第10章\02\pretty-1.htm”. 图1 交替变色的表格样式一.搭建HTML结构首先确定表格的HTML结构,代码如下: 折叠展开XML/HTML 代码复制内容到剪贴板 <table

jQuery_review之表单中的隔行变色以及关键字高亮显示

在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局.使用表格布局非常适合项目团队中有很多都是新成员,技术尚未成熟到可以从容判断div的布局会带来什么问题的情况.下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现. 这里要注意几个事情就是table的CSS设置中,thead以及tbody中是不好设置border属性的,所以只能妥协使用td的b

jquery实现html表格隔行变色

效果图实现代码: 通过css控制样式,利用jquery的addClass方法实现 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 实现表格隔行变色 </title> 5 <meta h

使一个特定的表格隔行变色(引自锋利的jQuery)

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="editplus" /> <title>使一个特定的表格隔行变色</title> <script src="jquery-1.7.1.min.js" ty

devexpress表格控件gridcontrol设置隔行变色、焦点行颜色、设置（改变）显示值、固定列不移动（附源码）

介绍一些常用的gridcontrol设置. 1.设置隔行变色.首先设置显示隔行变色,步骤:OptionsView-->EnableAppearanceEvenRow-->true和OptionsView-->EnableAppearanceOddRow-->true;然后设置奇数行和偶数行样式颜色等:Appearance-->EvenRow和Appearance-->OddRow.设计完成后,设计器出现隔行变色效果,如图: 2.设置奇偶行样式时,会看到其他行样式.App