php输出table表格奇偶行不同颜色,JavaScript_如何用jquery控制表格奇偶行及活动行颜色，虽然jquery流行已经很多年了， - phpStudy...

如何用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;

}

再就是页面代码了：

用jquery实现table奇偶行不同色

$(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");

});

*/

});

data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data
data	data	data	data

如果不需要鼠标事件，只需奇偶行不同色直接可以用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;

}相关阅读:

win10版office无法打开和崩溃等问题解决方法

jQuery表格插件datatables用法详解

jfinal与bootstrap的登录跳转实战演习

PHP图像处理类库MagickWand用法实例分析

实例讲解yii2.0在php命令行中运行的步骤

在javascript中实现函数数组的方法

nodejs分页类代码分享

JS操作HTML自定义属性的方法

C++实现简单的HTTP服务器

深入解析PHP的Laravel框架中的event事件操作

使用flash插件来调用pc的摄像头如何将它嵌入到TML页面中

超级简单实现JavaScript MVC 样式框架

php实现删除空目录的方法

JS替换文本域内的回车示例