[jQuery] 동적 tr 생성

[jQuery] 동적 tr 생성

1. TR 생성 후 추가

- 버튼 클릭시 TR 생성 후 추가.

- hpTable의 첫번째 TR영역을 읽어서 복제.

- id, text 영역을 바꾸고 hpTable에 추가함.

2. 수정시

- 추가된 모든 번호 지우고 첫번째는 초기화

-----------------------------------------------------------------------------

<script type="text/javascript">

// 추가 버튼 클릭시

function addHpNumClick() {

var lastItemNo = $("#hpTable tr:last").attr("id").replace("hp", "");

var nNum = parseInt(lastItemNo)+1;

if( nNum > 5 ) {

msgAlert("휴대폰 번호는 최대 5개까지 전송할 수 있습니다.");

return;

}

var newitem = $("#hpTable tr:eq(0)").clone();

    newitem.find("td:eq(0)").text(nNum);

    newitem.find("td:eq(1)").find("input").val("");

    newitem.attr("id", "hp" + nNum);

    $("#hpTable").append(newitem);

}

// 수정 버튼 클릭시

function modifyHpNumClick() {

$($("#hpTable tr").get().reverse()).each( function() {

var delNum = $(this).attr("id").replace("hp", "");

if(delNum>1) {

       $(this).attr("id", "hp" + delNum).remove();

} 

    });

$(".inputHpNum").each( function(idx) {

if(idx==0) {

$(this).val("");

$(this).focus();

}

});

}

</script>

-----------------------------------------------------------------------------

<dl class="number">

<dt><a id="addHpBtn" href="javascript:addHpNumClick();"><img src="/btn/bt_add.gif" alt="추가"></a> 

<a href="javascript:modifyHpNumClick();"><img src="/btn/bt_update.gif" alt="수정"></a>

</dt>

<dd class="intxt">

<table border="0" cellpadding="0" cellspacing="0" width="126">

<colgroup><col width="30"><col width="96"></colgroup>

<tr>

<th>순번</th>

<th>수신번호</th>

</tr>

</table>

<div class="box_scrl">

<table id="hpTable" border="0" cellpadding="0" cellspacing="0" width="126">

<colgroup><col width="30"><col width="96"></colgroup>

<tr id="hp1" >

<td class="num">1</td>

<td>

<input style="ime-mode:disabled" class="inputHpNum" type="text" value="<%=hpNo %>">

<a href="#"><img class="delImgBtn" src="/btn/bt_x.gif" alt=""></a>

</td>

</tr>

</table>

</div>

<div class="btn"><a href="javascript:sendSmsBtn()"><img src="/btn/bt_send.gif" alt="발송하기"></a></a></div>

</dd>

</dl>

출처 : http://thinkwave.tistory.com/60