[자바스크립트] 테이블 tr td 추가 삭제

 javascript 테이블 tr td 추가, 삭제하기

html부분

### html;php;

<FORM>

<TABLE id=driver class=driver border=0 cellSpacing=3 cellPadding=0 width="100%" name="driver">

 <TBODY>

 <TR>

  <TD style="HEIGHT: 48px"><SPAN style="COLOR: #9b9b9b; FONT-SIZE: 16px">＊</SPAN>차량번호</TD>

  <TD style="HEIGHT: 48px"><SPAN style="COLOR: #9b9b9b; FONT-SIZE: 16px">＊</SPAN>기사이름</TD>

  <TD style="HEIGHT: 48px"><SPAN style="COLOR: #9b9b9b; FONT-SIZE: 16px">＊</SPAN>전화번호</TD>

  <TD style="HEIGHT: 48px"><SPAN style="COLOR: #9b9b9b; FONT-SIZE: 16px">＊</SPAN>수량</TD>

  <TD style="HEIGHT: 48px">

   <IMG style="CURSOR: pointer" title="행 추가" onclick="addFile('driver');" border=0 align=right src="http://qkrrjsgh.tistory.com/admin/entry/image/icon/add.gif"><br />

   <IMG style="CURSOR: pointer" title="행 삭제" onclick="deleteFile('driver');" border=0 align=right src="http://qkrrjsgh.tistory.com/admin/entry/image/icon/remove.gif">

  </TD>

 </TR>

 <?php for($i=1;$i<$count;$i++){?>

 <TR>

  <TD style="HEIGHT: 34px"><INPUT id=c_num name=c_num[] value="<?=$c_num[$i]?>"></TD>

  <TD style="HEIGHT: 34px"><INPUT id=c_name name=c_name[] value="<?=$c_name[$i]?>"></TD>

  <TD style="HEIGHT: 34px"><INPUT id=c_phone onkeyup=OnCheckPhone(this); name=c_phone[] value="<?=$c_phone[$i]?>"></TD>

  <TD style="HEIGHT: 34px"><INPUT id=c_quantity name=c_quantity[] value="<?=$c_quantity[$i]?>"></TD>

  <TD style="HEIGHT: 34px"><A onclick="excel('<?=$i?>');" href="#"><IMG src="http://qkrrjsgh.tistory.com/admin/entry/image/print.png"></A></TD>

 </TR>

 <?php }?>

 </TBODY>

</TABLE>

</FORM>

JS부분

### js
function addFile(tb_name){//테이블 1줄추가 
 var tb_name = document.getElementById(tb_name); //테이블이름을 object로
 var rowIcnt = tb_name.rows.length; //테이블의 길이를 가져옴
 if(rowIcnt > 29) return false;//최대 29라인
 var oCurrentRow,oCurrentCell;

 oCurrentRow = tb_name.insertRow(); //tr 추가
 rowIndex = oCurrentRow.rowIndex; //줄번호

 for(var i=1;i<=5;i++){
  oCurrentCell = oCurrentRow.insertCell();//td 추가
  switch(i){
   case 1:
    switch_str = "<input type='text' name='c_num[]'>";
    break;
   case 2:
    switch_str = "<input type='text' name='c_name[]'>";
    break;
   case 3:
    switch_str = "<input type='text' name='c_phone[]' onkeyup='OnCheckPhone(this);'>";
    break;
   case 4:
    switch_str = "<input type='text' name='c_quantity[]'>";
    break;
   case 5:
    switch_str = "<a href='#' onclick=\"excel('"+rowIndex+"');\"><img src='../image/print.png'></a>";
    break;
   default:
    switch_str ="";
    break;
  }
  oCurrentCell.innerHTML = switch_str;//TD안의 내용물을 붙여넣는다
 } 
 
}


function deleteFile(tb_name){//Measurement 1줄삭제
 var tb_name = document.getElementById(tb_name);
 var rowIcnt = tb_name.rows.length;

 if(rowIcnt < 3){
  return false;
 }else{
  rowIcnt = tb_name.rows.length - 1;
  tb_name.deleteRow(rowIcnt);
 }
}

5년전에 자바스크립트로 코딩한것인데 자주 만들어야 되길래 저장해 놨었다...

이때는 제이쿼리가 막 쓰이기 시작할때라서 온리 자바스크립트로 짜는것이 더 좋았었다.

저때는 jquery 버전이 변할때마다, 익스플로러 버전이 변할때마다 잘 되던 소스가 안되고 막 그랬었다.

selected, checked 이걸 처리해 줄때는 항상 자바스크립트로 처리했던 기억이 난다.

요즘에 이런걸 짜려면 jquery를 써서 맨마지막 tr을 clone으로 복제한다음에 맨밑에 append하면 tr추가 끝이고

지울때는 tr갯수 확인해서 2이상일때 tr:last 를 remove 해주면 끝난다

당연한거라고 생각하면서 살았는데 옜날소스를 보니까, 제이쿼리 덕분에 많이 편해진것 같다. 

이런거는 제이쿼리로 몇줄이면 끝나니까...

근데 왜 업무는 끝이없고 작업시간은 계속 모지랄까