자바스크립트 HTML 테이블 행 추가/삭제

테이블 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(1); // 상단에 추가
    row = mytable.insertRow(mytable.rows.length); // 하단에 추가
alert(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 같이 보기

• jQuery 테이블 행 추가/삭제
• getElementById()
• HTML table 태그