동적 table] table object 를 주물러보려고...

참고 : - OTL... 다시 table 태그부터 연구해야하나... - - from killofki.egloos.com

두주쯤 전인가, select & option 태그로 list 를 가공해보려고 했는데,
focus 의 문제인지, scrollTop 을 안(?)찾아서인지 문제점에 봉착해버렸다.

... 결국, 그냥 datalist 를 만들어서 할까...했는데,

생각해보니, windows update 에 나오는 모양... 그거 table 이잖아...
리스트가 처음부터 만들어진 형태가 아닌, 가공해서 표시하는 것 같구...해서

table 을 data 표시용으로 써보기로 결정하고 시작했다.

...

<table id=sampleTable border=1 bordercolor=#000000>
<tr><td id=1>1</td><td id=2>2</td><td rowspan=3 id=3>3</td><td id=4>4</td></tr>
<tr><td id=5>5</td><td rowspan=2 id=6>6</td><td id=7>7</td></tr>
<tr><td id=8>8</td><td id=9>9</td></tr>
<tr><td id=10>10</td><td id=11>11</td><td id=12>12</td><td id=13>13</td></tr>
</table><br>
<br>
<div id=showDiv></div>

<script>
// .deleteRow(po)

// .insertRow(po)
// .rows[po].insertCell(x)
// .rows[po].deleteCell(x)

// .rows[po].cells[x].innerHTML
// .rows[po].cells[x].colSpan

// .rows[po].rowIndex
// .rows[po].cells[x].cellIndex

// offsetLeft, offsetTop

function offsetTopTR(trObject) {
  var trT=trObject, trTop=0, parentBreak=0;

  while (trT.nodeName!='TABLE') {
    trTop+=trT.offsetTop;
    trT=trT.offsetParent;

    if (parentBreak++>10) break;
    }

  return trTop;
  }

var tTrace=document.getElementById('sampleTable'), ov='';

with(tTrace) ov+=
  'r0c2 - '+rows[0].cells[2].id+' : '+rows[0].cells[2].offsetLeft+' px from left , <br />'
 +'r1c2 - '+rows[1].cells[2].id+' : '+rows[1].cells[2].offsetLeft+' px from left , <br />'
 +'r2c1 - '+rows[2].cells[1].id+' : '+rows[2].cells[1].offsetLeft+' px from left , <br />'
 +'<br />'
 +'r2c0.nextSibling - '+rows[2].cells[0].nextSibling.id+'<br />'
;

ov+='<br />';

with(tTrace) ov+=
  'r0 - '+offsetTopTR(rows[0])+'px from top , <br />'
 +'r1 - '+offsetTopTR(rows[1])+'px from top , <br />'
 +'r2 - '+offsetTopTR(rows[2])+'px from top<br />'
;

showDiv.innerHTML=ov;

</script>

...

1	2	3	4
5	6		7
8			9
10	11	12	13

...

원리...라고 하기엔 뭐하고,
몇번째 줄의 몇번째 cell 을 지정하면, 해당 cell 은 무엇을 표시하는 것인지
rowSpan 을 지정해둔 입장에서 서술해 본 것.

0번이 첫번째라는 것을 일단 염두해두고...

r0c2 는 첫째줄 세번째 3
r1c2 는 둘째줄 세번째 7 (3은 위에서 내려온거라 무시)
r2c1 은 셋째줄 두번째 9 (3과 6은 위에서 내려온거라 무시...)

tr 의 위치를 기준으로 스크롤 위치도 정해야하기 때문에 tr 의 table 기준 위치도 계산해 본거구...
(나중에는 tr 의 크기도 계산해야한다... OTL...)

...

생각보다 깔끔(?)하게 움직여줘서
나중에 가공하기도 편하겠다...라는 생각은 든다.

단지(?)... rowSpan 등으로 지정해둔 것의 위치를 cell 의 입장에서 볼 수 없는 문제는 안(?)풀렸음.
... 그냥, pass 해야하나...

...

이제, 이것을 이용해서, 주물러준 data 를 알맞게(?) 표시하는 것만 남았다.

...

NowMark killofki@.

ps... 검색...( 검색엔진(?) : 야후... )
1) http://www.phpschool.com/ - Community - Talkbox - 글제목 : jquery 쓰면...
2) http://blog.naver.com/jwjung0723 - 하하하!..님의 블로그

... 그리고 for (i in tableObjecT) ; 기능을 이용해서
필요(?)한 항목을 뽑아냈습니다.

그런데... OTL... 왜 위키피디아...같은 곳은 검색결과로 못본거지...?