Where The Streets Have No Name

동적 테이블 추가/삭제 및 폼 전송 예제 본문

Developement/Web

동적 테이블 추가/삭제 및 폼 전송 예제

highheat 2006. 3. 29. 15:46

http://www.jakartaproject.com/article/javascripttip/1113828539324

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>동적 테이블 추가/삭제 및 폼 전송 예제</title>

<script language="javascript">
function addRow() {
var oRow = dyntbl1.insertRow();
oRow.onmouseover=function(){dyntbl1.clickedRowIndex=this.rowIndex};
var oCell1 = oRow.insertCell();
var oCell2 = oRow.insertCell();
var oCell3 = oRow.insertCell();
var oCell4 = oRow.insertCell();
oCell1.innerHTML = "<input type=text name=itemcode>";
oCell2.innerHTML = "<input type=text name=itemname>";
oCell3.innerHTML = "<input type=text name=itemnum>";
oCell4.innerHTML = "<input type=button value=" X " onClick="delRow()">";
}
function delRow() {
dyntbl1.deleteRow(dyntbl1.clickedRowIndex);
}
</script>

</head>
<body>

<form>
<input type=submit>
<table id=dyntbl1 border=1>
<tr>
<th>품목코드</th>
<th>품목명</th>
<th>갯수</th>
<th><input type=button value=" + " onClick="addRow()"></th>
</tr>
<tr onMouseOver="dyntbl1.clickedRowIndex=this.rowIndex">
<td><input type=text name=itemcode></td>
<td><input type=text name=itemname></td>
<td><input type=text name=itemnum></td>
<td><input type=button name=dyntbl1_delRow value=" X " onClick="delRow()"></td>
</tr>
<tr onMouseOver="dyntbl1.clickedRowIndex=this.rowIndex">
<td><input type=text name=itemcode></td>
<td><input type=text name=itemname></td>
<td><input type=text name=itemnum></td>
<td><input type=button name=dyntbl1_delRow value=" X " onClick="delRow()"></td>
</tr>
</table>
</form>

</body>
</html>

rowIndex는 맨위부터 0에서 시작되서 증가됨

 

'Developement/Web' Related Articles more