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

2021년 5월 24일 (월) 20:50 기준 최신판

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>
    <th>item</th>
    <th>datetime</th>
  </thead>
  <tbody id="my-tbody"></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 = 'HELLO world';
    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 참고

↑ tbody 대신 table의 rows에 접근하여 행을 추가해도 되지만, th까지 삭제될 수 있으므로 thead와 tbody로 구역을 나누는 것이 좋다.

[1] tbody 대신 table의 rows에 접근하여 행을 추가해도 되지만, th까지 삭제될 수 있으므로 thead와 tbody로 구역을 나누는 것이 좋다.

[1]

@@ 1번째 줄: / 1번째 줄: @@
+==개요==
 ;테이블 tr 추가하기
+;JavaScript 테이블 행 추가
 ;자바스크립트 table 행 추가
 ;HTML 테이블 행 추가/삭제하기
+* table 내에 thead와 tbody 영역으로 나누어 tbody의 rows에 행 추가<ref>tbody 대신 table의 rows에 접근하여 행을 추가해도 되지만, th까지 삭제될 수 있으므로 thead와 tbody로 구역을 나누는 것이 좋다.</ref>
-==소스 코드==
+==예시==
-*예제: http://jmnote.com/js/dynamic_table.php
+<syntaxhighlight lang='html' run outheight='350'>
-<source lang='javascript'>
+<style>
-<!DOCTYPE html>
+table { border-collapse:collapse; }
-<meta charset="utf-8" />
+th, td { border:1px solid gray; }
-<title>테이블 행 추가/삭제</title>
+</style>
-<input type="button" value="행 추가하기" onclick="addrow()">
+<button onclick="add_row()">행 추가하기</button>
-<input type="button" value="행 삭제하기" onclick="delrow()">
+<button onclick="delete_row()">행 삭제하기</button>
+<hr>
-<table id="mytable" border="2" cellspacing="0">
+<table>
-<th colspan="2">테이블 제목</th>
+  <thead>
+    <th>item</th>
+    <th>datetime</th>
+  </thead>
+  <tbody id="my-tbody"></tbody>
 </table>
 <script>
-function addrow() {
+  function add_row() {
-	mytable = document.getElementById('mytable');
+    var my_tbody = document.getElementById('my-tbody');
-	row = mytable.insertRow(mytable.rows.length);
+    // var row = my_tbody.insertRow(0); // 상단에 추가
-	cell1 = row.insertCell(0);
+    var row = my_tbody.insertRow( my_tbody.rows.length ); // 하단에 추가
-	cell2 = row.insertCell(1);
+    var cell1 = row.insertCell(0);
-	cell1.innerHTML = '항목';
+    var cell2 = row.insertCell(1);
-	cell2.innerHTML = '<input type="text" name="strs[]"/>';
+    cell1.innerHTML = 'HELLO world';
-}
+    cell2.innerHTML = new Date().toUTCString();
-function delrow() {
+  }
-	mytable = document.getElementById('mytable');
-	if(mytable.rows.length < 1) return;
+  function delete_row() {
-	mytable.deleteRow(mytable.rows.length-1);
+    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>
-</source>
+</syntaxhighlight>
 ==같이 보기==
 *[[jQuery 테이블 행 추가/삭제]]
-*[[getElementById]]
+*[[getElementById()]]
+*[[HTML table 태그]]
+==참고==
-[[분류:HTML]]
+[[분류:HTML table]]
 [[분류:JavaScript]]
+[[분류: JsFiddle]]