jquery交替变换颜色的三种方法 实例代码

  

复制代码 代码如下:

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

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>even and odd</title>

  <script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript" language="javascript">

  $(function(){

  alert("第一种");

  $("tbody tr:even").css("background-color", "red");

  $("tbody tr:odd").css("background-color", "yellow");

  alert("第二种");

  $("tbody tr").each(function (index){

  alert(index);

  if(0 == index%2)

  {

  $(this).css("background-color", "blue");

  }

  if(1 == index%2)

  {

  $(this).css("background-color", "green");

  }

  });

  alert("第三种");

  rows = document.getElementsByTagName("tr");

  var length = rows.length;

  for(var i=0; i< length;i++){

  alert(i);

  if(0==i%2){

  rows[i].style.backgroundColor="#ffff00";

  }else

  {

  rows[i].style.backgroundColor="#0000FF";

  }

  }

  });

  </script>

  </head>

  <body>

  <table border="1">

  <tbody >

  <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>

  <tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>

  <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>

  <tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>

  <tr> <td>aaa</td> <td>aaa</td> <td>aaa</td></tr>

  <tr> <td>bbb</td> <td>bbb</td> <td>bbb</td></tr>

  </tbody>

  </table>

  </body>

  </html>