동적 테이블 추가/삭제 >> TR 또는 TD 스타일 지정하기

[출처] http://www.notecopy.com/bbs/board.php?bo_table=javascript_source&wr_id=43

<title>동적 테이블 추가/삭제 &gt;&gt; TR 또는 TD 스타일 지정하기.</title>

 

<script-x language="javascript-x">

    var liRowIdx = 0;

   

    // Row 추가.
    function addRow()
   {   
        var oRow = document.all.dyntbl1.insertRow();

   

        // onmouseover이벤트가 발생될때 fncOnMouseOver함수를 호출한다.
        // 생성된 TR(Row)에 스타일 속성값을 정의 한다.
        // .. 기타 많은 내용은 찾아봐야됨..ㅎㅎㅎ
        oRow.onmouseover=function(){fncOnMouseOver(this.rowIndex)};
        oRow.style.backgroundColor='#b0b0b0';

        var oCell1 = oRow.insertCell();
        var oCell2 = oRow.insertCell();
        var oCell3 = oRow.insertCell();
        oCell1.innerHTML = liRowIdx;
       
        // Td 속성값도 찾아보면 많음...ㅎㅎㅎ
        oCell2.style.backgroundColor = 'blue';
        oCell2.style.color           = 'white';
        oCell2.style.fontSize        = '40';
        oCell2.style.fontStyle       = 'italic';
        oCell2.style.border          = 'solid';
        oCell2.style.fontWeight      = '';
        oCell2.innerHTML             = "";

        oCell3.innerHTML = "<a href='#' onClick=\"delRow()\">삭제</a>";

   

        // RowIndex는 자동으로 재설정 된다는 것을 보여 주기 위한 함수 호출.
        fncReOrderByTdRowIndex();

      

        // RowIndex의 자동 재설정을 보여주기 위해 생성시마다 1씩 증가하는 변수.
        liRowIdx++;
    }

 

    // Row 삭제.
   function delRow()
  {
       // table에서 지정한 줄(tr)을 rows 컬렉션에서 삭제한다.
       document.all.dyntbl1.deleteRow(dyntbl1.clickedRowIndex);

   

       // Row 삭제후 RowIndex의 변화를 보여주기 위해 호출.
       fncReOrderByTdRowIndex();
   }

 

    // 발생되는 이벤트의 상황을 보여주기 위한 함수.
    function fncOnMouseOver(selectedIndex)
    {
        var lsHelpText = "<font color='blue'>총 Row = " + document.all.dyntbl1.rows.length + "개중";
             lsHelpText = lsHelpText + " 선택된 RowIndex = " + selectedIndex + "</font>";

        document.all.dyntbl1.clickedRowIndex = selectedIndex;
        document.all.dyntd.innerHTML         = lsHelpText;
    }

 

 

    // RowIndex는 자동으로 재설정 된다는 것을 보여 주기 위한 함수.
    function fncReOrderByTdRowIndex()
    {
        var i = 0;
        var liTdLength = document.all.dyntbl1.rows.length;  // Row 개수

       

        // 설명을 위한 TR태그가 두개 존재하므로 i = 2 부터 시작한다.
        for(i = 2; i<liTdLength; i++)
        {
            // rows(i)번째 Row의 cells(1)번째(두번째) Td에다가 재설정된 RowIndex를 보여준다.
            document.all.dyntbl1.rows(i).cells(1).innerHTML = document.all.dyntbl1.rows(i).rowIndex;
        }
    }

</script-x>

 

 

<table id="dyntbl1" border="1">
<tr>
    <td colspan="3" id="dyntd"> 메롱 ~ </td>
</tr>
<tr>
    <td>일련번호</td>
    <td>rowIndex - 추가하거나 삭제시 자동으로 재 설정된다.</td>
    <td><input type=button value=" 추가 " onClick="addRow()"></td>
</tr>
</table>