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

잔글 (27.122.242.72(토론)의 편집을 Jmnote의 마지막 판으로 되돌림)
태그: 일괄 되돌리기
17번째 줄: 17번째 줄:
<hr>
<hr>
<table>
<table>
   <thead>
   <thead id="my-tbody">
     <th>테이블</th>
     <th>테이블</th>
     <th>헤더</th>
     <th>헤더</th>
   </thead>
   </thead>
   <tbody id="my-tbody"></tbody>
   <tbody id="my-thead"></tbody>
</table>
</table>



2019년 1월 31일 (목) 10:21 판

1 개요

테이블 tr 추가하기
JavaScript 테이블 행 추가
자바스크립트 table 행 추가
HTML 테이블 행 추가/삭제하기
  • table 내에 thead와 tbody 영역으로 나누어 tbody의 rows에 행 추가[1]

2 예시

<style>  
table { border-collapse:collapse; }  
th, td { border:1px solid gray; }
</style>

<button onclick="add_row()">행 추가하기</button>
<button onclick="delete_row()">행 삭제하기</button>
<hr>
<table>
  <thead id="my-tbody">
    <th>테이블</th>
    <th>헤더</th>
  </thead>
  <tbody id="my-thead"></tbody>
</table>

<script>
  function add_row() {
    var my_tbody = document.getElementById('my-tbody');
    // var row = my_tbody.insertRow(0); // 상단에 추가
    var row = my_tbody.insertRow( my_tbody.rows.length ); // 하단에 추가
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = '항목';
    cell2.innerHTML = new Date().toUTCString();
  }

  function delete_row() {
    var my_tbody = document.getElementById('my-tbody');
    if (my_tbody.rows.length < 1) return;
    // my_tbody.deleteRow(0); // 상단부터 삭제
    my_tbody.deleteRow( my_tbody.rows.length-1 ); // 하단부터 삭제
  }
</script>

3 같이 보기

4 주석

  1. tbody 대신 table의 rows에 접근하여 행을 추가해도 되지만, th까지 삭제될 수 있으므로 thead와 tbody로 구역을 나누는 것이 좋다.
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}