"자바스크립트 HTML 테이블 행 추가/삭제"의 두 판 사이의 차이

1번째 줄: 1번째 줄:
;테이블 tr 추가하기
;테이블 tr 추가하기
;JavaScript 테이블 행 추가
;자바스크립트 table 행 추가
;자바스크립트 table 행 추가
;HTML 테이블 행 추가/삭제하기
;HTML 테이블 행 추가/삭제하기

2016년 7월 28일 (목) 09:23 판

테이블 tr 추가하기
JavaScript 테이블 행 추가
자바스크립트 table 행 추가
HTML 테이블 행 추가/삭제하기

1 소스 코드

<button onclick="add_row()"> 추가하기</button>
<button onclick="delete_row()"> 삭제하기</button>

<table id="mytable" border="2" cellspacing="0">
<th colspan="2">테이블 헤더</th>
</table>

<script>
function add_row() {
  mytable = document.getElementById('mytable');
  row = mytable.insertRow(mytable.rows.length);
  cell1 = row.insertCell(0);
  cell2 = row.insertCell(1);
  cell1.innerHTML = '항목';
  cell2.innerHTML = '<input type="text" name="strs[]"/>';
}
function delete_row() {
  mytable = document.getElementById('mytable');
  if(mytable.rows.length < 2) return;
  mytable.deleteRow(mytable.rows.length-1);
}
</script>

2 같이 보기

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}