利用jquery子屬性過濾器實現隔行變色

weixin_34162695發表於2017-06-16
jQuery過濾器

利用jquery子屬性過濾器實現隔行變色

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>   
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>

<script type="text/javascript">  
$(function(){
    $("table tr:nth-child(even)").css("background-color","yellow");
    //選擇所有偶數行，table是母元素，tr是子元素。之後一個冒號，後面是過濾器名稱。其實感覺設計成$("table tr").(nth-child(even)也行。不過既然這麼設計了，就得按這個來~
    $("table tr:nth-child(odd)").css("background-color","pink");
})
</script>  
</head>  
  
<body>  
<div align="left">隔行變色</div>  
<table width="462" height="152" border="1">  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
    <tr>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
      <td> </td>  
    </tr>  
</table>  
</body>  
</html>

之前這個方法不夠簡單
css實現隔行換色 - 簡書

參考

jQuery子屬性過濾選擇器用法分析jquery指令碼之家

相關文章