JQuery 책을 한번 쭉~~ 읽어 봤다..

예제로 올라와 있는 소스를 약간 변경해서 마우스 오버했을때 색상이 변경되도록 수정을 했다.

사용한건 hover 메소드와 toggleClass를 사용했다.


작성하면서 있었던 한가지 문제점은 hover 메소드를 bind 한 확장Element 집합은 table.hover tr 이었는데 event.target은 td 엘리먼트가 돌아오는 것이었다.

그래서 사용했던게 parentElement 속성을 사용했었으나! parentElemet 속성을 FF 에서 인식하지 못하는 문제가 발생하였다.

( IE, FF, OP 테스트 SF는 본인 PC가 이상해져서 테스트 못 함)

그래서 사용한것이 XPath 문법인 parentNode를 사용하여 tr 로 접근 하였다.


CSS 를 잘 정의하면 쉽게 기능을 붙여 나갈수 있을듯하다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>움직이는 얼루 무늬</title>
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
    </script>
    <script type="text/javascript">
      $(function() {
        $("table.hover tr:nth-child(even)").addClass("striped");
        $("table.hover tr").hover(
            function(event){
                $(event.target.parentNode).toggleClass('striped1');
            },
            function(event){
                $(event.target.parentNode).toggleClass('striped1');
            }
        );
      });
     
    </script>
    <style>
      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: #C0C0C0;
      }
      td {
        padding: 1px 8px;
      }
      table.hover{
      }
    </style>
  </head>

  <body>
    <table class="hover">
      <tr>
        <th>생산연도</th>
        <th>제조사</th>
        <th>모델</th>
      </tr>
      <tr>
        <td>1965</td>
        <td>Ford</td>
        <td>Mustang</td>
      </tr>
      <tr>
        <td>1970</td>
        <td>Toyota</td>
        <td>Corolla</td>
      </tr>
      <tr>
        <td>1979</td>
        <td>AMC</td>
        <td>Jeep CJ-5</td>
      </tr>
      <tr>
        <td>1983</td>
        <td>Ford</td>
        <td>EXP</td>
      </tr>
      <tr>
        <td>1985</td>
        <td>Dodge</td>
        <td>Daytona</td>
      </tr>
      <tr>
        <td>1990</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>1995</td>
        <td>Ford</td>
        <td>Ranger</td>
      </tr>
      <tr>
        <td>1997</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2000</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2005</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Unlimited</td>
      </tr>
      <tr>
        <td>2007</td>
        <td>Dodge</td>
        <td>Caliber R/T</td>
      </tr>
    </table>
  </body>
</html>

2009/08/07 21:24 2009/08/07 21:24

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다