동적테이블 다루기 insertRow deleteRow
Noname_2.html
인터넷에 있는 소스가 동작을 안해서 TBODY를 빼고 document.getElementByID("tbl") 만을 이용해서
수정 하였습니다.
1. 각 라인별로 삭제 버튼으로 지우기
2. 체크 박스 선택해서 일괄로 지우기
3. 줄 추가 하기
<html>
<head>
<title>insertRow/deleteRow</title>
<meta http-equiv="Content-Type" content="text/html;charset=euc-kr">
<script language='javascript'>
<!--
function removeRow(r){
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('tbl').deleteRow(i);
}
// delete Row
function delRow() {
var objTable = document.getElementById("tbl");
var lastRow = objTable.rows.length-1;
var chkCnt = checkCount();
if(chkCnt > 0) {
if( confirm("Delete Selected Item?") ){
for(var i = lastRow; i > 0; i--) {
if(document.getElementsByTagName("TR")[i].cells[0].firstChild.checked) objTable.deleteRow(i);
}
}
} else {
alert("Please Select Delete Row.");
return;
}
}
function checkCount() {
var objTable = document.getElementById("tbl");
var lastRow = objTable.rows.length-1;
var rtnCnt = 0;
for(var i = lastRow; i > 0; i--)
{
if(document.getElementsByTagName("TR")[i].cells[0].firstChild.checked) rtnCnt++;
}
return rtnCnt;
}
function allCheck() {
var objTable = document.getElementById("tbl");
var lastRow = objTable.rows.length - 1;
var rtnCnt = 0;
for(var i = lastRow; i > 0; i--) {
document.getElementsByTagName("TR")[i].cells[0].firstChild.checked = true;
}
}
function checkExcute(obj) {
if(obj.checked)
allCheck();
else
allUnCheck();
}
function allUnCheck() {
var objTable = document.getElementById("tbl");
var lastRow = objTable.rows.length-1;
var rtnCnt = 0;
for(var i = lastRow; i > 0; i--) {
document.getElementsByTagName("TR")[i].cells[0].firstChild.checked = false;
}
}
function fInsertRow() {
objTable = document.getElementById("tbl");
var row = objTable.rows.length;
objRow = document.createElement('TR');
objCel1 = document.createElement('TD');
objRow.appendChild(objCel1);
objCel1.innerHTML="<input type='checkbox' name='chk' >";
objCel1 = document.createElement('TD');
objRow.appendChild(objCel1);
objCel1.innerHTML="<input type='text' name='title' value='' size='20' maxlength='20'>";
objCel1 = document.createElement('TD');
objRow.appendChild(objCel1);
objCel1.innerHTML="<input type='text' name='contents' value='' size='40' maxlength='40'>"; // i를 붙여서 독립된 row를 생성
objCel1 = document.createElement('TD');
objRow.appendChild(objCel1);
objCel1.innerHTML="<input type='button' name=cmdDelete value='삭제' onClick='removeRow(this);'>";
document.getElementById('tbl').children(0).appendChild(objRow); // 생성된 row를 적용한다.
}
//-->
</script>
</head>
<table id="tbl" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input type="checkbox" name="all_chk" onClick="checkExcute(this)"></td>
<td>title</td>
<td>contents</td>
<td>삭제</td>
</tr>
</table>
<a href='#' onClick="fInsertRow()">추가</a>
<a href='#' onClick="delRow()">삭제</a>
댓글
댓글 쓰기