1.效果如图:
2.代码:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< style type ="text/css" >
#tb
{
width : 150px ;
text-align : center ;
}
.tr_color
{
background-color : #888 ;
}
</ style >
< script src ="JQuery/jquery-1.4.2.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
$(document).ready( function () {
// var $tr = $("tr");
// for (var i = 0; i < $tr.length; i++) {
// if (i % 2 == 0) {
// $tr[i].style.backgroundColor = "#888";
// }
// }
$( " tr:even " ).addClass( " tr_color " ); // odd为奇书 even偶数
});
</ script >
</ head >
< body >
< table id ="tb" >
< tbody >
< tr >< td > 第一行 </ td ></ tr >< tr >< td > 第一行 </ td ></ tr >
< tr >< td > 第二行 </ td ></ tr >< tr >< td > 第二行 </ td ></ tr >
< tr >< td > 第三行 </ td ></ tr >< tr >< td > 第三行 </ td ></ tr >
< tr >< td > 第四行 </ td ></ tr >< tr >< td > 第四行 </ td ></ tr >
< tr >< td > 第五行 </ td ></ tr >< tr >< td > 第五行 </ td ></ tr >
< tr >< td > 第六行 </ td ></ tr >< tr >< td > 第六行 </ td ></ tr >
</ tbody >
</ table >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title ></ title >
< style type ="text/css" >
#tb
{
width : 150px ;
text-align : center ;
}
.tr_color
{
background-color : #888 ;
}
</ style >
< script src ="JQuery/jquery-1.4.2.js" type ="text/javascript" ></ script >
< script type ="text/javascript" >
$(document).ready( function () {
// var $tr = $("tr");
// for (var i = 0; i < $tr.length; i++) {
// if (i % 2 == 0) {
// $tr[i].style.backgroundColor = "#888";
// }
// }
$( " tr:even " ).addClass( " tr_color " ); // odd为奇书 even偶数
});
</ script >
</ head >
< body >
< table id ="tb" >
< tbody >
< tr >< td > 第一行 </ td ></ tr >< tr >< td > 第一行 </ td ></ tr >
< tr >< td > 第二行 </ td ></ tr >< tr >< td > 第二行 </ td ></ tr >
< tr >< td > 第三行 </ td ></ tr >< tr >< td > 第三行 </ td ></ tr >
< tr >< td > 第四行 </ td ></ tr >< tr >< td > 第四行 </ td ></ tr >
< tr >< td > 第五行 </ td ></ tr >< tr >< td > 第五行 </ td ></ tr >
< tr >< td > 第六行 </ td ></ tr >< tr >< td > 第六行 </ td ></ tr >
</ tbody >
</ table >
</ body >
</ html >