>

选拔器实现多行交替变色表格,怎么着用jquery调

- 编辑:www.bifa688.com -

选拔器实现多行交替变色表格,怎么着用jquery调

css中table tr:nth-child(even)改换tr背景颜色: IE7,8无效,nth-childtr

例如:

.my_table tr:nth-child(even){
background:#E6EDF5;
}

.my_table tr:nth-child(odd){
background:#F0F5FA;
}

IE7,8无效,无法甄别。   换一种格局: 给急需变色的tr加上class

.table_border table tr.even{background: #f8f8fb;}

必发88官网,方法三:jquery实现

$(".nav ul li div a:nth-child(even)").css({'background':'red'});
$(".nav ul li div a:nth-child(odd)").css({'background':'grey'});

在英特网看了看 还也可能有第种种方法:

tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}

然则举行的时候开掘第三种截然未有影响,假诺你实施了有效果,请说说个中的缘故吗。

 第多种格局仿照效法地址:

 

tr:nth-child(even)更动tr背景颜色: IE7,8无效,nth-childtr 比如: .my_table tr:nth-child(even){background:#E6EDF5;}.my_table tr:nth-child(odd){background:#F...

前天正巧凌驾了索要在table中采纳CSS3 :nth-child()选择器达成多行交替变色表格的动静,故此总计一下。

尽管如此jquery流行已经非常多年了,一贯都感到到很难,也不曾花时间去读书它,只是一时哪一天心血来潮了去看一小点,时隔多日又会忘得一清二白。近期用到表格奇偶行分歧色,不得不去再看jquery,尽管感到依旧难,但现已不像以前同样无法入手了。做完后只好来惊讶一下jquery真是太牛了,不用本身再写一大堆javascript函数去落成了,容易几句轻易解决。

1、单行变色

先定义好表格的奇偶行样式,如下代码:

先从轻易的单行变色聊到。

复制代码 代码如下:

本条很简单,纵然只是原则性一行变色,只需求把该行的行数写在css中就能够。

body {
font-size:12px;
}

比方,只设定第六行变色,代码应写成,

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

tr:nth-child(6) {

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;
}

background: #f5fffa;

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

}

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

功用如下图:

再不怕页面代码了:

必发88官网 1

复制代码 代码如下:

单行变色

<!DOCTYPE html>
<html xmlns=";
<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>

2、单行交替变色

比如没有需求鼠标事件,只需奇偶行分裂色直接能够用CSS解决。

加以说单行交替变色。

复制代码 代码如下:

在html中,常用表格显示数据。表格的每一行交替使用二种颜色,使得表格数据更易观看。如下图:

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

必发88官网 2

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

单行交替变色

您也许感兴趣的作品:

  • Extjs依据条件设置表格某行背景象示例
  • javascript修改表格背景象实例代码分享
  • 一种表格背景象渐变效果的达成
  • jquery css 设置table的奇偶行背景观示例
  • 表格奇偶行设置不一致颜色的中央JS代码
  • 接纳JQuery和JS达成奇偶行背景颜色自定义效果
  • jQuery达成表格奇偶行突显差别背景观就那样容易

例行数量,调控奇偶行数来显现即可。

tr:nth-child(even) {

background: #f5fffa;

}

或者

tr:nth-child(odd) {

background: #f5fffa;

}

都得以兑现地点表格样式。

必发88官网 3

单行交替变色写法1

tr:nth-child(even) {

background: #f5fffa;

}

代码中even表示偶数行,也可用2n来代表,即,

tr:nth-child(2n) {

background: #f5fffa;

}

tr:nth-child(odd) {

background: #f5fffa;

}

代码中odd表示偶数行,也可用2n 1依旧2n-1来表示,即,

tr:nth-child(2n 1) {

background: #f5fffa;

}

或者

tr:nth-child(2n-1) {

background: #f5fffa;

}

效能如下图,代码见图下方调节和测验器红线框内:

必发88官网 4

单行交替变色写法2

3、多行交替变色

这段时间来讲说多行交替变色。

尽管将来的超过常规规供给是三行一变脸呢?分明有人想是或不是和3n有关啊,三行多个颜料嘛……

并非如此。先来拜会效果图:

必发88官网 5

三行交替变色

三行一变脸,其实质是,第一组第叁次成为赤褐,到下一组第一回形成银色,中间相差六条数据,也等于6个,所以三行一变脸并不是与3n有关,而是与6n有关系,其代码应该写成,

tr:nth-child(6n 1) {

background: #f5fffa;

}

tr:nth-child(6n 2) {

background: #f5fffa;

}

tr:nth-child(6n 3) {

background: #f5fffa;

}

效能如下图:

必发88官网 6

三行交替变色写法

同理可推知,四行一变脸的代码应该是:

tr:nth-child(8n 1) {

background: #f5fffa;

}

tr:nth-child(8n 2) {

background: #f5fffa;

}

tr:nth-child(8n 3) {

background: #f5fffa;

}

tr:nth-child(8n 4) {

background: #f5fffa;

}

功用如下图:

必发88官网 7

四行交替变色写法

本文由必发88官网发布,转载请注明来源:选拔器实现多行交替变色表格,怎么着用jquery调