동적으로 테이블 TR태그 추가/삭제하기
Posted 2008. 1. 26. 11:35<HTML>
<HEAD>
<script type="text/javascript">
<!--
//추가
function addTR(tr_id) {
var id = document.getElementById(tr_id);
var len = id.rows.length;
var newRow = id.insertRow(len-1);
var td0 = newRow.insertCell(0);
var td1 = newRow.insertCell(1);
var td2 = newRow.insertCell(2);
td0.innerHTML = (len+1)+"번째 tr ";
td1.innerHTML = " new cell 2 ";
td2.innerHTML = " new cell 3 ";
}
//삭제
function delTR(tr_id) {
var id = document.getElementById(tr_id);
var len = id.rows.length;
id.deleteRow(1));
}
//-->
</script>
</HEAD>
<BODY>
<form name='f'>
<input type="button" value="ADD" onclick="addTR('dynamicTR');" />
<input type="button" value="DEL" onclick="delTR('dynamicTR');" />
<TABLE id="dynamicTR" border="1">
<TR>
<TD>asdfasdf</TD>
<TD>asdf</TD>
<TD>asdfasdf</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
<HEAD>
<script type="text/javascript">
<!--
//추가
function addTR(tr_id) {
var id = document.getElementById(tr_id);
var len = id.rows.length;
var newRow = id.insertRow(len-1);
var td0 = newRow.insertCell(0);
var td1 = newRow.insertCell(1);
var td2 = newRow.insertCell(2);
td0.innerHTML = (len+1)+"번째 tr ";
td1.innerHTML = " new cell 2 ";
td2.innerHTML = " new cell 3 ";
}
//삭제
function delTR(tr_id) {
var id = document.getElementById(tr_id);
var len = id.rows.length;
id.deleteRow(1));
}
//-->
</script>
</HEAD>
<BODY>
<form name='f'>
<input type="button" value="ADD" onclick="addTR('dynamicTR');" />
<input type="button" value="DEL" onclick="delTR('dynamicTR');" />
<TABLE id="dynamicTR" border="1">
<TR>
<TD>asdfasdf</TD>
<TD>asdf</TD>
<TD>asdfasdf</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
'개발노트 > Script/CSS/jQuery' 카테고리의 다른 글
| 자바스크립트 객체 기초 (0) | 2010.04.23 |
|---|---|
| tiny_mce 에서 한글 문제 (1) | 2009.07.25 |
| Ajax를 이용한 UI개발(WYSWYG에디터) 기사 발췌 (0) | 2007.12.31 |
| form 유효성 체크 샘플 (0) | 2007.12.14 |
| scriptaculous를 이용한 tooltip 예제 (0) | 2007.12.14 |
- Filed under : 개발노트/Script/CSS/jQuery
