<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>
'9. 프로젝트 > └ 02. 홈페이지제작' 카테고리의 다른 글
| [알고리즘] 한글 초성 인덱스로 검색하기(사전용) (0) | 2008.06.15 |
|---|---|
| 엑셀->mysql (0) | 2008.05.26 |
| 주민등록번호를 입력하면 생년월일을 자동입력 (0) | 2008.04.22 |
| mysql 명령어 (0) | 2008.04.19 |
| select 리스트 바로 리로드 하기! (0) | 2008.04.19 |