[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>
-----------------------------------------------------------------------------
댓글