appendChild()로 table 태그에 tr 행을 추가 하는게 불가능한 경우가 있다.
왜 안 되는지! 어떻게 해야하는지! 이유와 해결방법을 정리해 보려고 한다.
결론부터 말하면, table엘리먼트 자체 메서드인 insertRow(), insertCell() 등을 이용하면 된다.
일반적인 table 생성 방식
- 보통 table > tr > td(th) 구조로 테이블을 생성한다.
<table>
<tr>
<th>제목</th>
<th>내용</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
table 태그의 행 추가 안 되는 이유
- table 태그는 자동으로 tbody가 자식 요소로 추가된다.
- 그래서 table 태그에 tr을 추가해도 행이 추가되지 않는다.
table 태그에 행 추가하는 방법 #1 (노가다 방법)
: appendChild()메서드를 통해 tbody 태그의 하위요소로 tr을 추가
// # tbody태그 취득
const tbody = document.querySelector('tbody');
// 1. 행 생성
const tr_01 = document.createElement('tr');
// 2. 셀 생성 및 텍스트 설정
const td_01 = document.createElement('td');
td_01.textContent = '추가1';
const td_02 = document.createElement('td');
td_02.textContent = '추가2';
// 3. 행의 자식요소로 셀 추가
tr_01.appendChild(td_01);
tr_01.appendChild(td_02);
// 4. 테이블에 행 추가
tbody.appendChild(tr_01);
table 태그에 행 추가하는 방법 #2 (권장 방법)
: table 엘리먼트 자체의 행추가/삭제 메서드 이용
-
행 추가: HTMLTableElement.insertRow(행 인덱스)
- 역할: 지정한 인덱스에 행을 추가하고, 추가한 행을 반환
- 매개변수: 테이불에 추가할 "행의 위치"를 지정(0부터 시작)
- 마지막 행을 추가하려면 -1을 넣어준다(디폴트 값이라 생략 가능)
-
셀 추가: HTMLTableRowElement.insertCell(셀 인덱스)
- 역할: 지정한 인덱스에 셀을 추가하고, 추가한 셀을 반환
- 매개변수: 행에 추가할 "셀의 위치"를 지정(0부터 시작)
-
행 삭제: HTMLTableElement.deleteRow(행 인덱스)
- 역할: 지정한 인덱스의 행을 삭제한다.
- 매개변수: 테이블에서 삭제할 "행의 인덱스"를 지정(0부터 시작)
- 마지막 행을 삭제하려면 -1을 넣어준다.(생략하면 안 됨)
// # table태그, tbody태그 취득
const table = document.querySelector('table');
// 2-1. 행 추가
const tr_02 = table.insertRow();
// 2-2. 셀 추가
const td_03 = tr_02.insertCell(0);
td_03.textContent = '추가3'
const td_04 = tr_02.insertCell(1);
td_04.textContent = '추가4'
(참고) 전체 소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS -->
<style>
table, td, th{
border: 1px solid black;
}
table {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<!-- 테이블 부분 -->
<table>
<tr>
<th>제목</th>
<th>내용</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<!-- 자바스크립트 -->
<script>
// # table태그, tbody태그 취득
const table = document.querySelector('table');
const tbody = document.querySelector('tbody');
// 1-1. 행 생성
const tr_01 = document.createElement('tr');
// 1-2. 셀 생성 및 텍스트 설정
const td_01 = document.createElement('td');
td_01.textContent = '추가1';
const td_02 = document.createElement('td');
td_02.textContent = '추가2';
// 1-3. 행의 자식요소로 셀 추가
tr_01.appendChild(td_01);
tr_01.appendChild(td_02);
// 1-4. 테이블에 행 추가
tbody.appendChild(tr_01);
// 2-1. 행 추가
const tr_02 = table.insertRow();
// 2-2. 셀 추가
const td_03 = tr_02.insertCell(0);
td_03.textContent = '추가3'
const td_04 = tr_02.insertCell(1);
td_04.textContent = '추가4'
</script>
</body>
</html>
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| [자바스크립트] HTML input 입력창 자동 포커스, 커서 마지막 설정 방법 (2) | 2021.01.16 |
|---|---|
| [자바스크립트] 입력값 체크(한글, 영문, 특수문자, 공백 정규식 활용) (2) | 2021.01.15 |
| [자바스크립트] 반복문 총정리: for in, for of, forEach 등 (0) | 2020.12.12 |
| [자바스크립트] 대소/동등/일치 비교 연산자와 Object.is() (2) | 2020.12.11 |
| [자바스크립트] 실행 환경 ECMA Script, Web API, Node.js (2) | 2020.12.10 |
댓글