테이블 행추가 삭제
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<script language="javascript">
var count = 1;
var addCount;
//행추가
function addInputBox() {
for(var i=1; i<=count; i++) {
if(!document.getElementsByName("test"+i)[0]) {
addCount = i;
break;
}
else addCount = count;
}
var addStr = "<tr><td width=20><input type=checkbox name=checkList value="+addCount+" size=20 ></td><td width=200><input type=text value ="+addCount+" name=test"+addCount+" size=20></td></tr>";
var table = document.getElementById("dynamic_table");
var newRow = table.insertRow();
var newCell = newRow.insertCell();
newCell.innerHTML = addStr;
count++;
}
//행삭제
function subtractInputBox() {
var table = document.getElementById("dynamic_table");
//var max = document.gForm.checkList.length;
//alert(max);
var rows = dynamic_table.rows.length;
var chk = 0;
if(rows > 1){
for (var i=0; i<document.gForm.checkList.length; i++) {
if (document.gForm.checkList[i].checked == true) {
table.deleteRow(i);
i--;
count--;
chk++;
}
}
if(chk <= 0){
alert("삭제할 행을 체크해 주세요.");
}
}else{
alert("더이상 삭제할 수 없습니다.");
}
}
function submitbutton() {
gForm.submit();
return;
}
</script>
<BODY onLoad="addInputBox()">
<form name="gForm" action="./alert.jsp" method="get">
<table cellpadding=0 cellspacing=0 id="" border="1">
<tr>
<td width="20"></td>
<td width="200">내용</td>
</tr>
<tr>
<table cellpadding=0 cellspacing=0 id="dynamic_table" border="1">
</table>
</tr>
</table>
</form>
<input type="button" value="추가" onclick="javascript:addInputBox();"> : <input type="button" value="삭제" onclick="javascript:subtractInputBox();"><br><br>
<input type="button" value="전송" onclick="javascript:submitbutton();">
</BODY>
</HTML>
빨간색 글씨가 추가된 사항 입니다.
- 내 머리~