공부/자바스크립트 jQuery

jQuery) 필터 선택자를 사용한 테이블 줄무늬

Ohming 2012. 3. 9. 17:53
 <!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script>
        $(document).ready(function(){
            $('tr:odd').css('background', '#F9F9F9');
            $('tr:even').css('background', '#9F9F9F');
            
            $('tr:first').css('background', '#000000').css('color', '#FFFFFF');
        });
    </script>
  <title>무제 문서</title>
</head>

<body>
<table>
      <tr>
          <th>이름</th>
        <th>혈액형</th>
        <th>지역</th>
  </tr>
      <tr>
        <td>강민수</td>
        <td>AB형</td>
        <td>충청북도</td>
  </tr>
      <tr>
        <td>구지연</td>
        <td>B형</td>
        <td>충청남도</td>
  </tr>
      <tr>
        <td>김미화</td>
        <td>O형</td>
        <td>경상도</td>
  </tr>
      <tr>
        <td>김선화</td>
        <td>O형</td>
        <td>서울특별시</td>
  </tr>
      <tr>
        <td>남기주</td>
        <td>O형</td>
        <td>제주도</td>
  </tr>
      <tr>
        <td>윤하린</td>
        <td>O형</td>
        <td>전라도</td>
  </tr>
</table>
</body>
</html>