테이블 포함한 폼 입력란 동적 추가/삭제
페이지 정보
작성자 서방님 댓글 0건 조회 209회 작성일 07-08-08 10:50본문
참조 : http://koxo.com/lang/js/method/insertRow.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>동적 테이블 추가/삭제 및 폼 전송 예제</title>
<style>body { background-color:lightgrey; }</style>
<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()">";
document.recalc();
}
function delRow() {
dyntbl1.deleteRow(dyntbl1.clickedRowIndex);
}
function fixscreen() {
var buffer = document.all.item(0).outerHTML;
document.open("text/html", "replace");
document.write(buffer);
document.close();
}
</script>
</head>
<body>
<form>
<input type=button value="화면고정" onClick="fixscreen()">
<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>
댓글목록
등록된 댓글이 없습니다.
