일상 기록 창고

테이블에 row, cell 추가 본문

프로그래밍/자바스크립트

테이블에 row, cell 추가

Crazy_Kong 2010. 4. 29. 15:56

 

 

 

<html>
<script language="javascript" type="text/javascript">
 var table = {};
 table = function( oname ){
  this.tblObj = document.getElementById('tbl');   // 테이블 객체
  this.rowObj = this.tblObj.rows;       // 테이블 로우 객체
  this.tblCell = 3;          // 테이블 cell 갯수
  this.isNs = navigator.appName == 'Netscape';   // 브라우저 정보 가져오기
  this.objs = oname;
 }

 table.prototype =
 {
  addRow : function( nEvents ) {
   var sRow = this.tblObj.insertRow( this.rowObj.length );
   var sText = this.objs;

   for(var i=0; i<this.tblCell; i++)
   {
    var sCell = sRow.insertCell(i);

    sCell.align = 'center';
    sCell.style.cursor = 'pointer';
    sCell.width = '100';

    if(nEvents && this.tblCell == i+1 )
    {
     this.isNs ? sCell.textContent = '[삭제]' : sCell.innerText = '[삭제]' ;
     this.isNs ? sCell.addEventListener( nEvents.replace( 'on', '' ), function(){ eval( sText + '.delRow( ' + sRow.rowIndex + ' )' ); }, false) :
        sCell.attachEvent( nEvents, function(){ eval( sText + '.delRow( ' + sRow.rowIndex + ' )' ); } );
    }
    else
    {
     this.isNs ? sCell.textContent = ( i == 0 ? this.rowObj.length : i ) : sCell.innerText = ( i == 0 ? this.rowObj.length : i ) ;
    }
   }
  },

  delRow : function( num )
  {
   // 삭제코드
   this.tblObj.deleteRow( num );
  }
 }
</script>
<body>
<table id="tbl" border="1" cellpadding="0" cellspacing="0">
</table>
<input type="button" value="추가" onclick="test.addRow( 'onclick' );" style="cursor:pointer;" />
<script language="javascript" type="text/javascript">
var test = new table( 'test' );
</script>
</body>
</html>

 

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

스크립트 용량 줄이기 JsMin  (0) 2012.04.02
anchor  (0) 2011.06.13
금일부터 부터 몇 일 뒤의 날짜 추출  (0) 2009.06.02
앞으로 가기, 뒤로 가기  (0) 2009.05.20
특정 부분 인쇄  (0) 2008.01.18
'프로그래밍/자바스크립트' Related Articles more