JQuery练习demo1(隔行变色)

1.效果如图：

　　

2.代码：

 

代码

<! 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 >

 

转载于:https://www.cnblogs.com/xqhppt/archive/2010/05/11/1733035.html