Striped Table | DHTML DOM


Home > Document > Web design > JavaScript > DOM > Striped table

all collection과 Element indexing

all collection과 Element indexing? 지난 페이지(status bar에 title 출력하기)에서 다음 페이지에는 줄무늬 팬틴가 뭔가 한다고 운운하더니 갑자기 딴 소리 하는 것 같겠지만 이게 다 줄무늬 팬티때문에 하는 짓 이랍니다. 줄무늬 팬티라는게 다른게 아니라 Table row의 배경색이 한 번씩 반복되는 테이블을 그렇게 표현한 겁니다. 물론 그런 테이블 못 만들 정도 실력이라면 지금 이 페이지를 볼 수 없겠지요만, 그냥 coding해서 만드는 테이블이 아니고 자동으로 Stripe 를 만들려고 하는거져. 그럼 본론으로 들어가서...

지난 페이지에서도 Parsing에 대해 언급했지만 parser가 문서를 분석하는 일련의 과정중에 Document tree 를 만들면서, 각 element의 index를 만들게 됩니다. Index 란 별 특별한 것이 아니라, 문서에 사용된 element 의 번호를 매긴다는 말입니다. 특히 같은 element 가 반복적으로 사용되었다면 [0] ~ 에서 시작해서 사용된 개수 만큼 번호를 매기게 되져. 예를 들어 P element 를 3번 사용했다면 p[0], p[1], p[2] 까지 indexing이 된다는 말입니다. 간단한 예제로 이를 증명해 보이겠습니다. 실행해 보기 전에 반드시 브라우저 상단 메인 메뉴의

도구 / 인터넷 옵션 / 고급 tab의 위에서 아래로 3분지 2 정도를 보면 "모든 스크립트 오류에 관련된 알림 표시"

를 체크하는 줄이 있는데 체크하세요...

입력
<body>
    <p id="Para_01"></p>
    <p id="Para_02"></p>
    <p id="Para_03"></p>
    <script type="text/javascript">
    <!--
    var Para = document.all.tags("p") // code 를 줄이기 위해 Para 변수 사용
    document.write(Para[0].id + "<br >")
    document.write(Para[1].id + "<br >")
    document.write(Para[2].id + "<br >")
    document.write(Para[3].id)
    // -->
    </script>
</body>
코드 실행 하기

위의 예제에서는 p element를 3 번 사용했지만 script block 에서는 [0] ~ [3] 까지 4 개가 들어간게 보이시져? 앗싸! 내가 드뎌 에러를 찾아따아~ 하시는 분들... 실망 스러우시겠지만 실수가 아니라... 아니 일부러 실수를 해 본 겁니다. 뭘 좀 알아 보기 위해서... 에러 메세지 중에 'Para.3.id 은(는) null 이거나 개체가 아닙니다.' 라는 메세지가 나오는데 scripting 하다가 가장 많이 보는 에러 메세지가 되시겠습니다. 이럴 경우에는 다음 3 가지 정도를 체크해 보시져...

  1. Scripting 으로 호출하려는 Tag에 사용된 id 와 같은 id 가 또 사용되었는지.
  2. 철자가 틀렸거나 대소문자가 잘 구분되었는지.
  3. 속성값에 사용된 따옴표가 빠지거나 더 들어갔는지.

물론 다른 에러도 많이 있지만 위의 3 가지 정도가 주류를 이룬다고 볼 수 있습니다. 이와 같이 Object 화된 element 마다 index 가 생기게 되는데, 위의 code 중에 document.all.tags는 뭘 의미하는 걸까요. document는 document Object 를 말하는 것인데 여기서 document란 body Tag을 의미하며, all은 body Tag 속에 사용된 모든 Tag을 말하는 것 입니다. 그러므로 document.all.tags("p") 는 body Tag 속에 사용된 모든 Tag 중에서 p Tag을 뜻하는 것이고, 사용된 p Tag 이 3 개 라면 순서대로

document.all.tags("p")[0] : 첫 번째 p Tag
document.all.tags("p")[1] : 두 번째 p Tag
document.all.tags("p")[2] : 세 번째 p Tag

순으로 Indexing 이 되는 겁니다. 그렇다면 Table의 경우도 indexing이 될까요?... 말해 뭐하겠습니까. 하지만 Table의 경우는 다른 Tag 보다 약간 복잡합니다. 만들기도 복잡하더니... 생긴대로 노는군요...



rows

rows 란 table에 사용된 tr 을 말하는 것으로, 이 것도 역시 indexing이 됩니다. 1 개의 Table에 사용된 tr의 개수가 5 개라면 rows[0] ~ rows[4] 까지 indexing 됩니다. tr[0] 이라고 하지 않는다는 것을 유념 하세요. 그럼 이제부터 줄무늬 팬티를 만들어 보도록 하시져...^^

입력
<html>
<head>
<title>Striped table</title>
<script type="text/javascript">
<!--
// obj에는 table id, color1에서 첫번째 tr 배경색, color2에는 두번째 tr 배경색으로 대입변수 지정
function stripedTable(obj, color1, color2)
{
  var tRows=obj.rows;
  for (i = 0 ; i < tRows.length ; i++) // tr 개수만큼 반복 실행
  {
    if (i % 2 == 0) // i 를 2로 나눈 나머지가 0 이면 즉, 짝수이면...
    {
    tRows[i].style.backgroundColor = color1;
    tRows[i].style.color = "white";
    } 
    else  // 아니면, 즉 홀수이면...
    {
    tRows[i].style.backgroundColor = color2;
    tRows[i].style.color = "black";
    }
  }
}
// -->
</script>
<style type="text/css">
<!-- 
td{text-align:center;}
caption{font-weight:bold;}
-->
</style>
</head>
<body>
  <table align="center" width="90%" id="Tbl_01" cellspacing="1">
    <caption>Tbl_01 = document.all.tags("table")[0]</caption>
    <tr>
      <td>R1 C1</td><td>R1 C2</td><td>R1 C3</td><td>R1 C4</td>
    </tr>
    <tr>
      <td>R2 C1</td><td>R2 C2</td><td>R2 C3</td><td>R2 C4</td>
    </tr>
    <tr>
      <td>R3 C1</td><td>R3 C2</td><td>R3 C3</td><td>R3 C4</td>
    </tr>
    <tr>
      <td>R4 C1</td><td>R4 C2</td><td>R4 C3</td><td>R4 C4</td>
    </tr>
    <tr>
      <td>R5 C1</td><td>R5 C2</td><td>R5 C3</td><td>R5 C4</td>
    </tr>
  </table>
  <br />
  <br />
  <table align="center" width="90%" id="Tbl_02" cellspacing="1">
    <caption>Tbl_02 = document.all.tags("table")[1]</caption>
    <tr>
      <td>R1 C1</td><td>R1 C2</td><td>R1 C3</td><td>R1 C4</td>
    </tr>
    <tr>
      <td>R2 C1</td><td>R2 C2</td><td>R2 C3</td><td>R2 C4</td>
    </tr>
    <tr>
      <td>R3 C1</td><td>R3 C2</td><td>R3 C3</td><td>R3 C4</td>
    </tr>
    <tr>
      <td>R4 C1</td><td>R4 C2</td><td>R4 C3</td><td>R4 C4</td>
    </tr>
    <tr>
      <td>R5 C1</td><td>R5 C2</td><td>R5 C3</td><td>R5 C4</td>
    </tr>
  </table>
  <script type="text/javascript">
  <!--
  stripedTable(Tbl_01, "#808080", "#dadada")
  stripedTable(Tbl_02, "#1f92ff", "#cc9999")
  // -->
  </script>
</body>
</html>
코드 실행 하기

위의 결과처럼 indexing을 이용하여 교대로 다른 색을 띄는 테이블을 만들어 보았습니다. code중에 function을 실행하는 sctipt block이 마지막에 있는 이유는 브라우저가 문서를 순차적으로 처리하기 때문에 테이블이 생기고 나서야 실행할 수 있기 때문이고,

stripedTable(Tbl_01, "#808080", "#dadada") 를
stripedTable(document.all.tags("table")[0], "#808080", "#dadada")으로 해도 같은 의미 입니다.

또한 이 사이트 JavaScript 메뉴의 Looping 중 Table 자동 제조기와 잘 Mix & Match 를 하면 손쉽게... 그야말로 손 안대고 코푸는 식으로 원하는 테이블을 만들 수도 있으리라 생각합니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색