JQuery - Table中行斑马线设置

利用nth-child为选择器来实现table中奇偶行颜色的设置
<html>
<head>
<title>jQuery Zebra Stripes</title>
</head>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
 
	<script type="text/javascript">
      $(function() {
        $("table tr:nth-child(odd)").addClass("striped");
        $("table tr:nth-child(even)").addClass("striped1");
      });
    </script>
 
    <style type="text/css">
      body,td {
        font-size: 10pt;
      }
      table {
        background-color: black;
        border: 1px black solid;
        border-collapse: collapse;
      }
      th {
        border: 1px outset silver;
        background-color: maroon;
        color: white;
      }
      tr {
        background-color: white;
        margin: 1px;
      }
      tr.striped {
        background-color: coral;
      }
      tr.striped1 {
        background-color: blue;
      }
      td {
        padding: 1px 8px;
      }
    </style>
 
 
<body>
    <table>
      <tr>
        <th>ID</th>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Apple</td>
        <td>0.60</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Orange</td>
        <td>0.50</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Banana</td>
        <td>0.10</td>
      </tr>
      <tr>
        <td>4</td>
        <td>strawberry</td>
        <td>0.05</td>
      </tr>
      <tr>
        <td>5</td>
        <td>carrot</td>
        <td>0.10</td>
      </tr>
    </table>
</body>
</html>

 

你可能感兴趣的:(jquery,nth-child)