$("tr:even"); //所有tr為偶數標籤
  $("tr:odd"); //所有tr為奇數標籤
  $("tr:first") ; //第一個tr的內容
  $("tr:last") ; //最後一個tr的內容
  $("tr:not(:first)");  //除了第一個tr以外的所有tr

 

    <head>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#btn1').click(function(){
                    $('tr:first').addClass('css1');
                });
                $('#btn2').click(function(){
                    $('td:first').addClass('css1');
                });
                $('#btn3').click(function(){
                    $('tr:last').addClass('css2');
                });
                $('#btn4').click(function(){
                    $('td:last').addClass('css2');
                });
                $('#btn5').click(function(){
                    $('tr:not(:first)').addClass('css1');
                });
                $('#btn6').click(function(){
                    $('tr').removeClass();
                    $('td').removeClass();
                });
                $('#btn7').click(function(){
                    $('tr:odd').addClass('css1');
                });
                $('#btn8').click(function(){
                    $('tr:even').addClass('css1');
                });
            })
        </script>

        <style type="text/css">
            .css1{background-Color:blue;}
            .css2{background-Color:yellow;}
        </style>
    </head>
    <body>
        <input type="Button" id="btn7" name="btn7" value="測試 odd" /><br />
        <input type="Button" id="btn8" name="btn8" value="測試 even" /><br />
        <br />
        <input type="Button" id="btn1" name="btn1" value="測試 First Tr" /><br />
        <input type="Button" id="btn2" name="btn2" value="測試 First Td" /><br />
        <input type="Button" id="btn3" name="btn3" value="測試 Last Tr" /><br />
        <input type="Button" id="btn4" name="btn4" value="測試 Last Td" /><br />
        <input type="Button" id="btn5" name="btn5" value="測試 Not First Tr" /><br />
        <br />
        <input type="Button" id="btn6" name="btn6" value="還原預設值" /><br />
        <hr />
        <table border="1">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
            </tr>
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
                <td>14</td>
                <td>15</td>
            </tr>
            <tr>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
                <td>20</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
            </tr>
        </table>
    </body>
</html>

arrow
arrow
    文章標籤
    even odd first last not
    全站熱搜

    Roger 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄