더 나은 프로그래머가 되자

버튼으로 폼 추가하기 본문

언어/js

버튼으로 폼 추가하기

greathuman 2010. 11. 15. 19:50


<script language="javascript">
function family_add(){
 var f = document.form;
 var t = document.getElementById("family_tb");

 if(isNaN(f.ref_raw_index.value) || t.rows.length > 10) return;
 if(parseInt(f.ref_raw_index.value, 10) < 1) f.ref_raw_index.value = 0;
 if(parseInt(f.ref_raw_index.value, 10) > t.rows.length) f.ref_raw_index.value = t.rows.length;

 var tr    = t.insertRow(f.ref_raw_index.value);
 //tr = table.insertRaw();
 var td = tr.insertCell();
 td.align = "center";
    td.innerHTML = '<input  style="width:50px" name="fam_info1[]" maxlength="20"/>';
    var td = tr.insertCell();
 td.align = "center";
 td.innerHTML = '<input  style="width:100px" name="fam_info2[]" maxlength="30"/>';
    var td = tr.insertCell();
 td.align = "center";
 td.innerHTML = '<input  style="width:100px" name="fam_info3[]" maxlength="20"/>';
    var td = tr.insertCell();
 td.align = "center";
 td.innerHTML = '<input  style="width:100px" name="fam_info4[]" maxlength="30"/>';
    var td = tr.insertCell();
 td.align = "center";
 td.innerHTML = '<input  style="width:100px" name="fam_info5[]" maxlength="30"/>';
    var td = tr.insertCell();
 td.align = "center";
 td.innerHTML = '<input  style="width:50px" name="fam_info6[]" maxlength="20"/>';
    var td = tr.insertCell();
 td.align = "center";
 td.innerHTML = '<input type="button" value="삭제" onclick="family_del(this);">';
}
function family_del(button){
 var t = document.getElementById("family_tb");
 var tr = button.parentNode.parentNode;
 for(var i=0; i<t.rows.length; i++) if(t.rows[i] == tr) t.deleteRow(i);
}
</script>
<form name="form">
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="family_tb">
                                   <tr>
          <td align="center" width="80"><input type="hidden" name="ref_raw_index" value="1"><input  style="width:50px" name="fam_info1[]" maxlength="20"/></td>
                                        <td align="center"><input  style="width:100px" name="fam_info2[]" maxlength="30"/></td>
                                        <td align="center" width="120"><input  style="width:100px" name="fam_info3[]" maxlength="20"/></td>
                                        <td align="center" width="120"><input  style="width:100px" name="fam_info4[]" maxlength="30"/></td>
                                        <td align="center" width="120"><input  style="width:100px" name="fam_info5[]" maxlength="30"/></td>
                                        <td align="center" width="80"><input  style="width:50px" name="fam_info6[]" maxlength="20"/></td>
                                        <td align="center" width="80">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" style="padding-left:10px" align="center">
                                            <input type="button" value="추가" onclick="family_add()">
                                        </td>
                                    </tr>
</table>
</form>

Comments