innerhtml 을 이용해서 원하는 곳에 tr과 td를 삽입하는 방법

<script>
var selectedIdx = -1;
var tblRowLimit    = 10; //10개 행만 지원 합니다.

//테이블의 맨 마지막에 새 행을 추가합니다.
function insertNewRow(cellHtml)
{

    var oCell    = new Array();

    if(cellHtml.length ==0){
        return void(alertFocus("입력할 내용이 없습니다",document.frmData.cellHtml));

    }
    if(tblNews.rows.length >= tblRowLimit){
        return void(alertFocus("10개 이상은 입력 하실수 없습니다.",document.frmData.cellHtml));
    }

    //새 행 추가
    var gRows  = tblNews.insertRow();
    gRows.onmousedown = function(){selectRow(this)}
    gRows.onmouseover = function(){tblMouseOver(this)}
    gRows.onmouseout = function(){tblMouseOut(this)}
    //새 셀(td)추가
    oCell[0]    = gRows.insertCell();
    
    //각셀의 값 입력
    oCell[0].innerHTML = cellHtml;

    //추가된 셀 선택
    selectRow(gRows) ;
    
}

//cell HTML 업데이트
function updateTblRow()
{
    if(selectedIdx != -1){
        if(document.frmData.cellHtml.value.length ==0){
            alertFocus("수정할 내용이 없습니다",document.frmData.cellHtml);
        }else{
            tblNews.rows[selectedIdx].cells[0].innerHTML=document.frmData.cellHtml.value;
        }
    }
}


//위로!
function upRow()
{
    if(selectedIdx == -1) alert("선택두 안하셨구마~");
    else if(selectedIdx == 0) alert("이미 맨위구마~ ㅡㅡ;;");
    else{
        
        var thisCell    = tblNews.rows[selectedIdx].cells[0];
        var distCell    = tblNews.rows[selectedIdx -1].cells[0];
        var tmp    = distCell.innerHTML;

        distCell.innerHTML = thisCell.innerHTML;
        thisCell.innerHTML = tmp;
        selectRow(tblNews.rows[selectedIdx -1]);
    }
}


//아래로!
function downRow()
{
    if(selectedIdx == -1) alert("선택두 안하셨구마~");
    else if(selectedIdx + 1 >= tblNews.rows.length) alert("이미 맨 아래 구마~ ㅡㅡ;;");
    else{
        
        var thisCell    = tblNews.rows[selectedIdx].cells[0];
        var distCell    = tblNews.rows[selectedIdx +1].cells[0];
        var tmp    = distCell.innerHTML;

        distCell.innerHTML = thisCell.innerHTML;
        thisCell.innerHTML = tmp;
        selectRow(tblNews.rows[selectedIdx +1]);
    }
}

//삭제
function clearRow()
{
    tblNews.deleteRow(selectedIdx);
    selectedIdx = -1;
}

//해당 row( or cell) 클릭시 작동
function selectRow(tblRow)
{
    var f = document.frmData;
    if(selectedIdx != tblRow.rowIndex){ //선택
        if(selectedIdx != -1 ){
            tblNews.rows[selectedIdx].cells[0].style.backgroundColor="white";
        }

        f.cellHtml.value = tblRow.cells[0].innerHTML;
        tblRow.cells[0].style.backgroundColor="#CCFFCC";
        selectedIdx = tblRow.rowIndex;
        tblEventInit();
    }else{                                            //선택해제
        selectedIdx = -1;
        tblRow.cells[0].style.backgroundColor="white";
        document.frmData.cellHtml.value="";
    }
    
}

function tblMouseOver(tblRow){
    if(tblRow.rowIndex != selectedIdx){
        tblRow.cells[0].style.backgroundColor="silver";
    }
}

function tblMouseOut(tblRow){

    if(tblRow.rowIndex != selectedIdx){
        tblRow.cells[0].style.backgroundColor="white";
    }
}

function tblEventInit()
{
    //셀 이벤트 초기화
    var len = tblNews.rows.length;
    for(var i = 0 ; i < len ; i++){
        tblNews.rows[i].onmousedown = function(){selectRow(this)}
        tblNews.rows[i].onmouseover = function(){tblMouseOver(this)}
        tblNews.rows[i].onmouseout = function(){tblMouseOut(this)}

    }
}

function init()
{
    tblEventInit();//셀 이벤트 초기화
}

function printDate(t)
{
    var txt = document.all[t.name + "Text"];
    var time = t.value;
//    alert(time);
    if(time.length>0){
        txt.innerHTML = time.substring(0,4) + "년";
    }

    if(time.length>4){
        txt.innerHTML += " " +  time.substring(4,6) + "월";
        if( time.substring(0,4) > 2300 ||  time.substring(0,4) < 1800){
                txt.innerHTML = "<font color=red>1800~2300년 사이로 넣어주세요.</font>";
                return "";
        }
    }

    if(time.length>6){
        txt.innerHTML += " " + time.substring(6,8) + "일";
        if( time.substring(4,6) > 12 ||  time.substring(0,4) < 1){
                txt.innerHTML = "<font color=red>01~12월 사이로 입력해주세요.</font>";
                return "";
        }
    }

    if(time.length>8){
        txt.innerHTML += " " + time.substring(8,10) + "시";
        if( time.substring(6,8) > 31 ){
                txt.innerHTML = "<font color=red>1~31일 사이로 입력해주세요</font>";
                return "";
        }
    }

    if(time.length>10){
        txt.innerHTML += " " + time.substring(10,12) + "분";
        if( time.substring(8,10) > 23){
                txt.innerHTML = "<font color=red>0시~23시 사이로 입력해주세요</font>";
                return "";
        }
    }

        if( time.length ==12 && time.substring(10,12) > 59  ){
                txt.innerHTML = "<font color=red>0분~59분 사이로 입력해주세요</font>";
                return "";
        }


    return true;
}

function check(mode)
{
    var newsText
    var f = document.frmData;
    
    if(tblNews.rows.length < 1) alert("작성된 뉴스가 없습니다");
    else if(!f.title.value)void(alertFocus("제목을 입력해주세요. 각 뉴스 셋을 구분하는 이름으로 사용됩니다.",f.title));
    else if(f.sdTime.value.length != 12)void(alertFocus("게시 시작 일시의 형식이 잘못되었습니다",f.sdTime));
    else if(f.edTime.value.length != 12)void(alertFocus("게시 종료 일시의 형식이 잘못되었습니다",f.edTime));
    else if(f.edTime.value < f.sdTime.value)void(alertFocus("게시 종료 일시는 시작일시보다 과거가 될수없습니다",f.edTime));
    else{

        for(var i = 0 ; i < tblRowLimit ; i ++){ //히든폼에 데이터 세팅
            newsText = f["newsTxt" + (i + 1) ];
            if(tblNews.rows[i]){
                newsText.value = tblNews.rows[i].cells[0].innerHTML;
            }else{
                newsText.value = "";
            }
        }

        f.mode.value=mode;
        f.action    = "Action.asp";
        f.target    =  "frmAction";
        f.submit();
    }
}

//alert 후 focus 이동후 false return;
function alertFocus(alertMsg,focusForm)
{
    alert(alertMsg);
    focusForm.focus();
    return false;
}
//키보드 입력시 숫자 이외의 키를 누를 경우 false 를 리턴한다.
function isNum(e){
    //alert(event.keyCode);
    if ((event.keyCode >= 45 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8|| event.keyCode==13 || event.keyCode==9)     return true;
    else return false;

}
</script>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" onLoad=init()>
테이블 셀 innerHTML 컨트롤 예제
<form name=frmData onSubmit="return false" method="post">
    <input type=hidden name="mode" value="">
    <input type=hidden name="no" value="">
    <input type=hidden name="newsTxt1" value="">
    <input type=hidden name="newsTxt2" value="">
    <input type=hidden name="newsTxt3" value="">
    <input type=hidden name="newsTxt4" value="">
    <input type=hidden name="newsTxt5" value="">
    <input type=hidden name="newsTxt6" value="">
    <input type=hidden name="newsTxt7" value="">
    <input type=hidden name="newsTxt8" value="">
    <input type=hidden name="newsTxt9" value="">
    <input type=hidden name="newsTxt10" value="">

<table border="1" width="700" align="center" cellspacing="0" bordercolordark="white" bordercolorlight="black">
    <tr>
        <td width="196" valign="bottom">
            <table border="0" cellspacing="0" cellpadding="0" width="180" align=center id="tblNews" style="border-width:1px; border-style:dotted;">
                <tr>
                    <td ><img src="http://ulgom.net/image/logobysong.gif" ></td>
                </tr>
            </table>
            <p></p>
            <input type=button name=btnSave value="수정사항저장" onClick="check("edit")">
            <input type=button name=btnSave value="새이름으로 저장"  onClick="check("new")">
        </td>
        <td width="44" >
            <input type="button" value="↑↑" onClick="upRow()"><br><br>
            <input type="button" value="↓↓" onClick="downRow()"><br><br>
            <input type="button" value="삭제" onClick="clearRow()">
        </td>
        <td width="438" >
            제목 : <input type=text name=title value="" size="46">
            <br>시작일시 : <input type=text name=sdTime maxlength=12 size=12 value="" onKeyDown="return isNum(event)" onKeyUp="return printDate(this)">
            <font  id="sdTimeText" ></font>
            <br>종료일시 : <input type=text name=edTime maxlength=12 size=12 value="" onKeyDown="return isNum(event)" onKeyUp="return printDate(this)">
            <font id="edTimeText"></font>
            <br><font color=red>날짜는 분단위 까지 숫자로만 입력합니다
            <br>(예 : 2005년 1월 1일 오후 2시 5분 : 200501011405</font>
            <textarea name=cellHtml rows="7" cols="44"></textarea><br>
            <input type=button value="수정" name=btnSave onClick="updateTblRow()" ><input type=button value="추가" name=btnNew onClick="insertNewRow(this.form.cellHtml.value)">
        </td>
    </tr>
</form>
</table>
<center>
<!--- newsList 용 iframe --->
<iframe name=frmNewsList  width=680 height=300 frameborder=0></iframe>
<!--- newsList 용 iframe --->
</center>
</body>
<!----DB 컨넥션용 Target Iframe--->
<iframe name="frmAction"  width=0 height=0></iframe>
<!----DB 컨넥션용 Target Iframe--->
</html>