利用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.3.js"></script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="400">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>21</td>
</tr>
<tr>
<td>5</td>
<td>钱七</td>
<td>22</td>
</tr>
</table>
</body>
<script type="text/javascript">
// 设置表头的颜色 表头不需要高亮显示
$(‘table tr:first‘).css({‘background‘:‘#694d9f‘});
$(‘table tr:even‘).not(‘table tr:first‘).css({‘background‘:‘#888‘});
$(‘table tr:odd‘).css({‘background‘:‘#ccc‘});
// 表头是不需要高亮显示的
$(‘table tr‘).not(‘table tr:first‘).hover(
function(){
color=$(this).css(‘backgroundColor‘); // 获取之前的背景颜色
$(this).css({‘background‘:‘yellow‘});
},
function(){
$(this).css({‘background‘:color});
}
);
</script>
</html>

原文地址:http://blog.51cto.com/11871779/2069975

时间: 2024-11-09 02:53:14

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

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

表格(Table)隔行变色

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

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

表格中的隔行变色,很常见 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:ev

(转)适用微信小程序的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

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

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

10.2 隔行变色的表格

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

JQuery实现表格的增加行和删除行

利用JQuery实现datatables插件的增加和删除行操作 在学习过程中遇到了这个利用JQuery对表格行的增加和删除,特记录下来以供初学者参考. 下面是主要的代码: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>zengjia he shancu </title> <meta charset="utf-8

jquery插件之表格隔行变色并鼠标滑过高亮显示

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

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