동적테이블 다루기 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>