<script type="text/javascript">
<!--
    // 행 추가
    function go_record_add()
    {
        var oRow = order_extra_list.insertRow(-1); // insertRow(0) 인 경우는 맨처음에 삽입, insertRow(-1) 인 경우는 맨마지막에 삽입, insertRow(n)인 경우는 특정 위치에 삽입
        oRow.onmouseover=function(){order_extra_list.clickedRowIndex=this.rowIndex};

        var oCell1 = oRow.insertCell(0); // 순번 레이블
        var oCell2 = oRow.insertCell(1); // 필드1:input-text
        var oCell3 = oRow.insertCell(2); // 필드2:input-text
        var oCell4 = oRow.insertCell(3); // 필드3:input-text
        var oCell5 = oRow.insertCell(4); // 추가 버튼:a

        oCell1.height = "32";

        oCell1.style.backgroundColor = "#EEEEEE"; // 자바스크립트처럼 속성에 접근해야 한다.
        oCell1.align = "center";
        oCell2.align = "center";
        oCell3.align = "center";
        oCell4.align = "center";
        oCell5.align = "center";

        var rowCount = jQuery("table#order_extra_list tr").length;
        oCell1.innerHTML = rowCount - 1;
        oCell2.innerHTML = "<input type=\"text\" name=\"uniform_number[]\" style=\"width:50px\" class=\"inputTypeText\" />";
        oCell3.innerHTML = "<input type=\"text\" name=\"uniform_name[]\" style=\"width:50px\" class=\"inputTypeText\" />";
        oCell4.innerHTML = "<input type=\"text\" name=\"height[]\" style=\"width:50px\" class=\"inputTypeText\" />";
        oCell5.innerHTML = "<span class=\"button\"><a href=\"javascript:void go_record_del()\">삭제</a></span>";
    }

    // 행 삭제
    function go_record_del()
    {
        order_extra_list.deleteRow(order_extra_list.clickedRowIndex);
    }

    // 모든 행 삭제
    function go_record_alldel()
    {
        // 매번 출력시 전체행을 삭제한다. 전체행의 삭제시 행번호 1번만 전체 행의 개수-1 만큼 반복 삭제한다.
        var rowCount = jQuery("table#order_extra_list tr").length;
        if (rowCount > 1) {
            for (i = 1; i <= rowCount - 1; i++)
            order_extra_list.deleteRow(1);
        }
    }
//-->
</script>

 

소스

 

<table id="order_extra_list" name="order_extra_list" width="100%" border="1" bordercolor="#DDDDDD" cellpadding="6" cellspacing="0" style="border-collapse:collapse;margin-top:5px;">
    <tr height="32" onMouseOver="order_extra_list.clickedRowIndex=this.rowIndex">
        <td align="center" style="width:30px">순번</td>
        <td align="center" style="width:50px">필드1</td>
        <td align="center" style="width:50px">필드2</td>
        <td align="center" style="width:50px">필드3</td>
        <td align="center"><input type='button' value=' add ' onclick='javascript:void go_record_add()'></td>
    </tr>
</table>