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

1 개요

테이블 tr 추가하기

JavaScript 테이블 행 추가

자바스크립트 table 행 추가

HTML 테이블 행 추가/삭제하기

• table 내에 thead와 tbody 영역으로 나누어 tbody의 rows에 행 추가

2 예시

<syntaxhighlight lang='html'> <style> table { border-collapse:collapse; } th, td { border:1px solid gray; } </style>

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

---

<thead>

 </thead>
 <tbody id="my-tbody"></tbody>

테이블	헤더

<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> </syntaxhighlight run outheight='350'>

3 같이 보기

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