<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()\"><input type=button value=\"+\" onClick=\"addCol()\">";
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();
}
function addCol() {
var vCell,tmp;
for (var i=0; i<dyntbl1.rows.length; i++) {
tmp=dyntbl1.rows[i].cells[dyntbl1.rows[i].cells.length-1].cloneNode(true);
dyntbl1.rows[i].deleteCell();
vCell=dyntbl1.rows[i].insertCell();
vCell.innerHTML=i==0?"<input type=button value=' X ' onclick='delCol(parentNode.cellIndex)'>":" ";
vCell=dyntbl1.rows[i].insertCell();
vCell.innerHTML=tmp.innerHTML;
}
}
function delCol(idx) {
for (var i=0; i<dyntbl1.rows.length; i++) {
dyntbl1.rows[i].cells[idx].removeNode();
}
}
</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()"><input type=button value="+" onClick="addCol()"></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()"><input type=button value="+" onClick="addCol()"></td>
</tr>
</table>
</form>
</body>
</html>
[출처] 롬멜
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|