table in div] table 의 tr (줄항목)이 삭제/추가되어도 보던거(?) 보기 위해...1 (부분실패작)

참고 : - table] javascript 내부변수 검색을 위한 전진... - http://killofki.egloos.com/5326330

어제인가, 그제인가... (귀찮아서 확인을 안해보고있는...)

table 의 div 내 표시위치를 설명(?)하고 난 후의 계획이 div 밖에 있는 아이템을 삭제한 후에도
table 이 표시되고 있는 공간을 그대로 표시하자...라는 부분을 서술하고자 한다.

원리는...

삭제될 부분을 저장해놓고 삭제되는 만큼 스크롤을 올리거나
추가된 만큼 스크롤을 내리는 원리.

...

어제 만들어놓은 tr 위치 계산기도 따로 넣어놓고,
div 를 비교를 위해 세개나(?) 써야해서, 함수 따로 만들어서 사용했다.

좌측은 아무짓(?)도 안한 것, 가운데는 "C" 부분 TR을 삭제한 것, 우측은 "C" 부분 TR 위에 "cc" 를 추가한 것이다.

...

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

function TRdelete(divObj, tableObj, deleteNum) {
  var divScrollTop, trFloor, deleteHeight;
  divScrollTop=divObj.scrollTop;

  with(tableObj) {
    deleteHeight=rows[deleteNum].offsetHeight;
    trFloor=trOffsetTop(rows[deleteNum])+rows[deleteNum].offsetHeight;
    deleteRow(deleteNum);

    if (trFloor<divScrollTop) divObj.scrollTop-=deleteHeight;
    }
  }

function TRinsert(divObj, tableObj, insertNum, insertHTML) {
  var divScrollTop, trFloor, insertHeight;
  divScrollTop=divObj.scrollTop;

  with(tableObj) {

    insertRow(insertNum);
    with(rows[insertNum]) {
      insertCell(0);
      cells[0].innerHTML=insertHTML;
      trFloor=trOffsetTop(rows[insertNum])+(insertHeight=offsetHeight);
      }

    if (trFloor<divScrollTop) divObj.scrollTop+=insertHeight;
    }
  }
</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('100530_1');ABCprint('100530_2');ABCprint('100530_3');
</script>
<div style="clear:both;"></div>

<script>
document.getElementById('DIV100530_1').scrollTop=90;
document.getElementById('DIV100530_2').scrollTop=90;
document.getElementById('DIV100530_3').scrollTop=90;
</script>

<script>
  TRdelete(document.getElementById('DIV100530_2'), document.getElementById('TABLE100530_2'), 2);
  TRinsert(document.getElementById('DIV100530_3'), document.getElementById('TABLE100530_3'), 2, 'cc');
</script>

...

...

음... 다 좋은(?)데...
-.-... tr 과 tr 사이의 갭을 계산하지 못하는 결과가 나오는 것 같다.

tr 표시위치를 처음부터 정해놓고
상하변동값을 저장하면서 써야하는건가...

...

NowMark killofki@.