본문 바로가기

HTML/JS/CSS

[javascript] innerHTML 을 이용한 테이블 row 추가, 삭제.

   function btn_add_onClick()   // Row 추가 function
    {
        tableID            = document.all.tb_title; // 테이블 ID
        var rowNum        = tableID.rows.length;
        var tableCell    = 7; //  테이블 셀 개수. (<td></td> 의 개수라고 보면됨)
        var newRowNum    = tableID.insertRow(rowNum);

        for(var j=0; j < tableCell ; j++)
        {
            newRowNum.insertCell(j);
        }

        newRowNum.className    = "table_content";  // sytle.css 에 정의되어있는..
        newRowNum.align             = "center";
        //newRowNum.style.background  = "#F0F0F0";
        newRowNum.height           = "24";
        newRowNum.cells[0].innerHTML  = "<input type='checkbox' name='chkbox'>";
        newRowNum.cells[1].innerHTML 
         = "<input type='text' value='正規Card' readonly style='border:0'
        onclick='btn_int_onClick ("+rowNum+");' style='cursor:hand' size='5'>";

        newRowNum.cells[2].innerHTML  = "<input type='text' name='emp_nm_"+rowNum+"'
        value='' readonly style='border:0' size='6' >"+
        "<input type='hidden' name='emp_no_"+rowNum+"' value='' readonly >"+
        "<input type='hidden' name='tel_no_"+rowNum+"' value='' readonly >";

        newRowNum.cells[3].innerHTML 
         = "<input type='text' name='dpt_nm_"+rowNum+"' value='' readonly style='border:0'
        size='15' >"+
         "<input type='hidden' name='dpt_cd_"+rowNum+"' value='' readonly >";

        newRowNum.cells[4].innerHTML  
        = "<input type='text' name='rank_nm_"+rowNum+"' value='' readonly style='border:0'
        size='5' >"+
        "<input type='hidden' name='rank_cd_"+rowNum+"' value='' readonly style='border:0'
        size='5' >";

        newRowNum.cells[5].innerHTML  
        = "<input type='text' name='floor_nm_"+rowNum+"' value='' readonly style='border:0' >"+
        "<input type='hidden' name='floor_cd_"+rowNum+"' value='' readonly style='border:0'  >";
       
        newRowNum.cells[6].innerHTML  
        = "<input type='text' name='inout_dept_nm_"+rowNum+"' value='' readonly style='border:0'
        size='25' >"+
        "<input type='hidden' name='inout_dept_cd_"+rowNum+"' value='' readonly >"+
        "<input type='hidden' name='approve_stat_"+rowNum+"' value='N'/>"+
        "<input type='hidden' name='issueReason_"+rowNum+"'value='' />"+
        "<input type='hidden' name='cardIssueTyp_"+rowNum+"' value='N' />"+
        "<input type='hidden' name='inouter_compnyNm_"+rowNum+"' value='' />";

          // cells[] 의 배열을 TableCell 변수와 맞게 조절한다.


    function btn_del_onClick()   // row 삭제 function
    {
        var count = 0;
        tableID       = document.all.tb_title;
        var rowNum    = tableID.rows.length;
   
        if(rowNum > 1){
            if(tableID.rows[1].cells.length == 1){
                alert("삭제 대상이 없습니다.");
                return false;
            }
        }
   
        for (var rowNum ; rowNum>1 ; rowNum--)
        {
            if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
            {
                count++;
            }
        }
        if( count ==0 ){
            alert("삭제할 항목이 없습니다.");
            return;
        }
        if(!confirm("삭제하시겠습니까?")) return;
   
        rowNum    = tableID.rows.length;
        for (var rowNum ; rowNum>1 ; rowNum--)
        {
            if ( tableID.rows[rowNum-1].all.namedItem("chkbox").checked == true )
            {
                tableID.deleteRow(rowNum-1);          // 체크된 Row 를 삭제
            }
        }
    }

----------------------------  여기까지 javascript Function 정의 --------------------------

<html>
<head></head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="BEC8D3" id="tb_title">
    <tr>
      <td>..</td>..<td>..</td> ....... 생략...
    </tr>
</table>
</body>
</html>

// function 에서 정의해준 table id 를 가진 테이블 하나가 있으면 됩니다.