ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2. JQuery 짝수/홀수 요소 가져오기
    JQuery 2022. 8. 30. 13:44

    :odd 와 :even을 이용하여 홀수/짝수 요소를 가져올 수 있다.

     

    $("태그:odd") 해당 태그의 홀수번째 요소를 가져온다.
    $("태그:even") 해당 태그의 짝수번째 요소를 가져온다.

     

     

    * 테이블을 이용한 홀수/짝수 요소 예시

    <!DOCTYPE html>
    <head>
        
        <meta charset="UTF-8">
        <title>문서 제목</title>
        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
        <style>
            
            table,th,td{
                border: 1px solid black;
                border-collapse: collapse;
            }
            th,td{
                padding: 5px 10px;
            }
        </style>
    </head>
    <body>
        
        <table>
            <tr>
                <th>no</th>
                <th>이름</th>
                <th>생년월일</th>
            </tr>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>2022-08-29</td>
            </tr>
            <tr>
                <td>2</td>
                <td>홍길동</td>
                <td>2022-08-29</td>
            </tr>
            <tr>
                <td>3</td>
                <td>홍길동</td>
                <td>2022-08-29</td>
            </tr>
            <tr>
                <td>4</td>
                <td>홍길동</td>
                <td>2022-08-29</td>
            </tr>
            <tr>
                <td>5</td>
                <td>홍길동</td>
                <td>2022-08-29</td>
            </tr>
        </table>
    </body>
    <script>
     
        console.log($("tr:odd")); //홀수
        console.log($("tr:even")); //짝수
        $("tr:even").css("background-color","gray");
    </script>
    </html>

    'JQuery' 카테고리의 다른 글

    6. JQuery 요소 검색하기  (0) 2022.08.30
    5. JQuery 형제요소 가져오기  (0) 2022.08.30
    4. JQuery 자식요소 가져오기  (0) 2022.08.30
    3. JQuery 부모요소 가져오기  (0) 2022.08.30
    1. JQuery 요소 가져오기  (0) 2022.08.30
Designed by Tistory.