table-div] table 의 tr (줄항목)이 삭제/추가되어도 보던거(?) 보기 위해...2

*참고*
: - table] OTL... div 표시위치 고정시키기 1차실패... - http://killofki.egloos.com/5327058
: http://killofki.tistory.com/entry/table-in-div-table-의-tr-줄이-삭제추가되어도-보던거-보기-위해

음... 실패작 만들고 나서 다음 이야기를 바로 쓰려고 했지만...
= =;... 겁...난다는 것 보다, 내 겁이라... (게으름... OTL...) 뭐... 어쨌든...

...

이번에는 tr 의 표시위치를 찾아낸 후

표시위치를 기준으로 위에 있으면 스크롤 조정하고,
그 외에는 가만히(?) 있는 쪽으로 처리하려고 한다.

...

지난번 예제와 같이,
좌측은 무변동, 가운데는 "C" 부분 삭제, 우측은 "C" 위에 "cc"를 넣었다.

...

<script>
function trOffsetTop(trObj) {
  return trObj.offsetTop+(trObj.offsetParent.tagName=='TABLE'?0:trObj.offsetParent.offsetTop)
  }

function TRTopNum(divObj, tableObj) {
  var divScrollTop, TRshowi;

  divScrollTop = divObj.scrollTop;

  with(tableObj) for (TRshowi=0; TRshowi<rows.length; TRshowi++)
    if ((trOffsetTop(rows[TRshowi])+rows[TRshowi].offsetHeight)>=divScrollTop) break;
  return TRshowi;
  }

function TRdelete2(divObj, tableObj, deleteNum) {
  var TRScrollTop, TRTopsave, TRcount;

  TRTopsave=TRTopNum(divObj, tableObj);
  with(tableObj) {
    TRcount=rows.length;
    if (deleteNum<TRTopsave) {
      TRScrollTop=trOffsetTop(tableObj.rows[TRTopsave]);
      deleteRow(deleteNum);
      if (tableObj.rows.length!=TRcount)
        divObj.scrollTop+=trOffsetTop(tableObj.rows[TRTopsave-1])-TRScrollTop;
      }
    else deleteRow(deleteNum);
    }
  }

function TRinsert2(divObj, tableObj, insertNum, insertHTML) {
  var TRScrollTop, TRTopsave, TRcount;

  TRTopsave=TRTopNum(divObj, tableObj);
  TRcount=tableObj.rows.length;
  with(tableObj) {
    if (insertNum<=TRTopsave) {
      TRScrollTop=trOffsetTop(tableObj.rows[TRTopsave]);
      insertRow(insertNum);
      rows[insertNum].insertCell(0);
      rows[insertNum].cells[0].innerHTML=insertHTML;
      
      if (tableObj.rows.length!=TRcount)
        if (TRcount)
        divObj.scrollTop+=trOffsetTop(tableObj.rows[TRTopsave+1])-TRScrollTop;
      }
    else {
      insertRow(insertNum);
      rows[insertNum].insertCell(0);
      rows[insertNum].cells[0].innerHTML=insertHTML;
      }
    }
  }

</script>

<script>
function ABCprint(abcID) {
var ABCi, SList='ABCDEFGHIJKLMN';

  document.write('<div id=DIV'+abcID+' style="width:100px; height:100px; overflow:auto; background-color:#dddddd; float:left;">');
  document.write('<table id=TABLE'+abcID+'>');

  for (i=0; i<SList.length; i++) document.write('<tr height=20><td>'+SList.charAt(i)+'</td></tr>');
  document.write('</table></div>');
}
</script>

<script>
ABCprint('100531_1');ABCprint('100531_2');ABCprint('100531_3');
</script>
<div style="clear:both;"></div>

<script>
document.getElementById('DIV100531_1').scrollTop=90;
document.getElementById('DIV100531_2').scrollTop=90;
document.getElementById('DIV100531_3').scrollTop=90;
</script>

<script>
  TRdelete2(document.getElementById('DIV100531_2'), document.getElementById('TABLE100531_2'), 2);
  TRinsert2(document.getElementById('DIV100531_3'), document.getElementById('TABLE100531_3'), 2, 'cc');
</script>

...

...

음... 맨 처음에는 rows[] 를 따로 object 로 저장해서 써야하는가...라는 생각을 했는데,
하다보니, offsetTop 의 의미가 아닌, rows[n] 의 의미로 접근해도 되겠다는 생각이 들었다.

scrollTop 에 적용할 위치재조정의 경우도
맨 처음에는 *2 - 형식으로 "곱셈을 넣은 계산식"을 할까...했는데,
+= 형식도 받아들이니(?) tr 이 변동된 값만을 계산해서 넣었다.

그리고... 중요한(?), deleteNum 과 insertNum 이 topTR 과 같은 경우...인데,
deleteNum 이 원값보다 작을 때, insertNum 이 원값보다 작거나 같을 때만 처리한다면
문제될 것이 없다는 생각이 들었다.

혹시나...싶어서, TRcount 를 넣어서,
"변동이 없을 가능성"도 넣긴 했는데,
= =;... 그건 try{} catch() { } 가 있어야 제대로 작동하지 않을까...라는 생각도 들었다.

...

그 외 개선해봐야 할 사항이라면...

스크롤 위치가 위로 변경되면 위로 추적하고,
밑으로 변경되면 밑으로 추적해야하지 않을까...라는 생각을 해본다.

스크롤 움직일 때마다 해야하는건가...라는, 좀 애매한 부분도 있긴 하지만,
스크롤의 거친(?) 움직임에도 반응해주는게 좋겠다는 생각이 든다.

스크롤은 이미지가 처리된 "최종 표시"를 해주는 것이니까,
어떻게든 '부하량"이 있게 마련이라...
(FF 에서 매끄럽게 받아준다면 다행이겠지만...)

...

NowMark killofki@.