脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 表格奇偶行及活动行颜色

如何用jquery控制表格奇偶行及活动行颜色

 更新时间：2014年04月20日 15:19:29   作者：  
这篇文章主要介绍了如何用jquery控制表格奇偶行及活动行颜色,需要的朋友可以参考下
虽然jquery流行已经很多年了，一直都感觉很难，也没有花时间去学习它，只是偶尔哪天心血来潮了去看一点点，时隔多日又会忘得一干二净。最近用到表格奇偶行不同色，不得不去再看jquery，虽然感觉还是难，但已经不像以前一样无从下手了。做完后不得不来感叹一下jquery真是太牛了，不用自己再写一大堆javascript函数去实现了，简单几句轻松搞定。

先定义好表格的奇偶行样式，如下代码：
复制代码 代码如下:

body {
font-size:12px;
}

th {
color: #FFFFFF;
background: #A172AC;
}

table,table td,table th {
padding: 0.5em;
margin: 0;
border:0;
border-spacing:0;
}
/* odd items 1,3,5,7,... */
table tbody tr.odd,
.odd {
background: #FBD106;
}

/* even items 2,4,6,8,... */
table tbody tr.even,
.even {
background: #E6453B;
}

/* hovered items */
.odd:hover,
.even:hover,
.hover {
background: #4BB747;
color: #FFFFFF;
}

再就是页面代码了：
复制代码 代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jquery实现table奇偶行不同色</title>
<link href="style/mysql.css" rel="stylesheet" />
<script src="javascript/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//排除th标签，th可能是有自己特有的样式，所以定义th样式。
//$("tr:not(:has(th)):odd").addClass("odd");
//$("tr:not(:has(th)):even").addClass("even");
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
//如果CSS中不定义".odd:hover"和".even:hover"就需要toggleClass()。
/*
$("tr").mouseover(function () {
$(this).toggleClass(".hover");
});
$("tr").mouseout(function () {
$(this).toggleClass(".hover");
});
*/
});
</script>
</head>
<body>
<div id="outline">
<table>
<tr id="tth">
<th>data</th>
<th>data</th>
<th>data</th>
<th>data</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>

如果不需要鼠标事件，只需奇偶行不同色直接可以用CSS搞定。
复制代码 代码如下:

table tr:nth-child(even) td,
table tr:nth-child(even) th {
background-color: #FBD106;
}

table tr:nth-child(odd) td,
table tr:nth-child(odd) th {
background-color: #E6453B;
}
您可能感兴趣的文章:

相关文章

  • 提示$ is not defined错误分析及解决

    提示$ is not defined错误分析及解决

    $ is not defined这种提示想必在调试时经常会遇到吧，经过搜索查询了一下结果是引入Jquery的顺序不对，改过来就可以了，有此问题的朋友可以参考下哈
    2013-04-04
  • jquery自定义属性(类型/属性值)

    jquery自定义属性(类型/属性值)

    属性的类型可以为：图片、文本框、按钮，然后选择需要设置的属性值：src、width、height、title、value等等，具体实现如下，感兴趣的朋友可以参考下哈
    2013-05-05
  • jQuery学习笔记之总体架构

    jQuery学习笔记之总体架构

    jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。那么作为一个前端设计师，怎么可能不来深入了解下jQuery呢，首先我们从他的总体构架开始吧
    2014-06-06
  • jQuery实现360°全景拖动展示

    jQuery实现360°全景拖动展示

    360全景就是视角超过人的正常视角的图像，而我们这里说的全景特指水平视角360度，垂直视角180度的图像。可以全景空间里进行切换，达到浏览各个不同场景360全景展示的目的。
    2015-03-03
  • JQuery index()方法使用代码

    JQuery index()方法使用代码

    做了很多种方式的选择项卡切换。没有一个确定的方法。程序的魅力就在于一个[结果]有无数种[方式]去实现。
    2010-06-06
  • jQueryUI中的datepicker使用方法详解

    jQueryUI中的datepicker使用方法详解

    JqueryUI作为一个优秀的前端库，在项目中经常会用到，下面小编抽点时间给大家介绍jQueryUI中的datepicker使用方法详解，一起看看吧
    2016-05-05
  • jQuery中DOM常见操作实例小结

    jQuery中DOM常见操作实例小结

    这篇文章主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下
    2019-08-08
  • jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

    jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

    下面小编就为大家带来一篇jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • JQuery插件iScroll实现下拉刷新，滚动翻页特效

    JQuery插件iScroll实现下拉刷新，滚动翻页特效

    下拉自动加载进行分页的运用越来越多，比起传统的分页该方法分页用户体验更好，布局也更简单了。目前正在使用和学习中……
    2014-06-06
  • 常见的jQuery选择器汇总

    常见的jQuery选择器汇总

    本文汇总介绍了常见的jQuery选择器知识，包含基本元素选择器、分层选择器、基本条件选择器、内容条件选择器、可见性条件选择器、属性选择器、子元素选择器、表单元素选择器、表单属性选择器。十分的详尽，有需要的小伙伴参考下吧
    2014-11-11

最新评论