티스토리 뷰

Programming/JAVASCRIPT

자바스크립트 테이블 행 추가 삭제 하기

Beat. 2016. 9. 3. 13:57

버튼을 눌렀을때 테이블의 행을 추가하거나 삭제하고 싶을 경우에는 어떻게 할까요?


자바스크립트를 이용해서 테이블의 행을 동적으로 추가하거나 삭제할수 있는 예제입니다.

<body>안에 복사붙여넣기 하면 바로 실행할수 있습니다.

<script>
//행개수
var count = 1;
//최대 행개수
var full_count = 5;
  //행추가
  function add_tr() {
 //최대 행개수보다 크면 리턴
 if(count>full_count){
  alert("최대5개까지만 가능합니다.");
  return;
 }
 
 //추가할 HTML
 var add_cell1 = count+"번 항목";
 var add_cell2 = "<input type=text name=text"+count+" id=text"+count+" size=40>";
 
 //행추가할 테이블 가져오기
 var table_name = document.getElementById("text_table");
 
 //tr만들기
 var new_row = table_name.insertRow();
 
 //td만들기
 var new_cell1 = new_row.insertCell();
 var new_cell2 = new_row.insertCell();
 
 //td안에 넣을 HTML
 new_cell1.innerHTML = add_cell1;
 new_cell2.innerHTML = add_cell2;
 //행추가할때마다 행개수 +1
 count++;
  }

  //행삭제
  function delete_tr() {
 //행삭제할 테이블 가져오기
    var table = document.getElementById('text_table');
 
 //행이 하나밖에 없으면 삭제하지 않기
    if (table.rows.length < 2){
     alert("더이상 삭제할수 없습니다.");
     return;
    }
 
 //tr삭제하기
    table.deleteRow(table.rows.length - 1);
 //삭제할때마다 행개수 -1
 count--;
  }
</script>
<button onclick="add_tr()">추가</button>
<button onclick="delete_tr()">삭제</button>
<table cellpadding=0 cellspacing=0 id="text_table" border="1">
</table>


<body>안에 복사붙여넣기 하면 바로 실행할수 있습니다.




'Programming > JAVASCRIPT' 카테고리의 다른 글

자바스크립트 강제 클릭 이벤트  (0) 2016.09.05
자바스크립트 숨기기 보이기  (0) 2016.09.05
자바스크립트 배열 (2차원배열)  (0) 2016.09.02
자바스크립트 배열 (1차원배열)  (0) 2016.09.02
자바스크립트 버튼 비활성화 활성화  (0) 2016.09.02
공유하기 링크
댓글