위와 같은 테이블 형식의 데이터를 만들기 위해서는 HTML의 테이블 태그를 이용할 수 있지만
오늘은 JS를 이용하여 위와 같은 테이블을 만들어보려고 한다.
1. Internal 방식으로 테이블에 간단히 CSS 추가
<style>
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
th {
background-color: gray;
}
th, td {
padding: 10px 20px;
border: 1px solid #000;
}
tr td:first-child {
background-color: lightgray;
font-weight: bolder;
}
tr td:last-child {
text-align: right;
}
</style>
2. JS 코드로 테이블 뼈대 만들기
<body id="body">
<script type="text/javascript">
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
document.getElementById('body').appendChild(table);
</script>
</body>여기서 createElement()는 말 그대로 HTML 요소를 생성하는 것인데 메소드의 파라메터로
HTML 태그 이름을 문자열 형식으로 넣어주면 된다. 그렇게 생성한 요소들을 변수에 담은 후에
appendChild()를 이용해서 테이블의 자식 요소들로 thead와 tbody를 생성해준다.
관리자 도구에서 element를 확인해보면 table의 뼈대가 잘 만들어진 것을 확인할 수 있다.
3. 테이블에 행과 데이터를 추가하기
// thead에 속하는 부분
let tr1 = document.createElement('tr');
let th1 = document.createElement('th');
th1.innerHTML = "Person";
let th2 = document.createElement('th');
th2.innerHTML = "Age";
tr1.appendChild(th1);
tr1.appendChild(th2);
thead.appendChild(tr1);
// tbody 첫번째 행
let tr2 = document.createElement('tr');
let td2_1 = document.createElement('td');
td2_1.innerHTML = "Chris";
let td2_2 = document.createElement('td');
td2_2.innerHTML = "38";
tr2.appendChild(td2_1);
tr2.appendChild(td2_2);
tbody.appendChild(tr2);
// tbody 두번째 행
let tr3 = document.createElement('tr');
let td3_1 = document.createElement('td');
td3_1.innerHTML = "Dennis";
let td3_2 = document.createElement('td');
td3_2.innerHTML = "45";
tr3.appendChild(td3_1);
tr3.appendChild(td3_2);
tbody.appendChild(tr3);
// tbody 세번째 행
let tr4 = document.createElement('tr');
let td4_1 = document.createElement('td');
td4_1.innerHTML = "Sarah";
let td4_2 = document.createElement('td');
td4_2.innerHTML = "29";
tr4.appendChild(td4_1);
tr4.appendChild(td4_2);
tbody.appendChild(tr4);
//tbody 세번째 행
let tr5 = document.createElement('tr');
let td5_1 = document.createElement('td');
td5_1.innerHTML = "Karen";
let td5_2 = document.createElement('td');
td5_2.innerHTML = "47";
tr5.appendChild(td5_1);
tr5.appendChild(td5_2);
tbody.appendChild(tr5);
</script>
</body>innerHTML을 이용하여 데이터를 삽입하고 해당 데이터를 해당 행에 추가한다.
예를 들어 tr1에 제목(th1, th2)를 추가 후, tr1을 thead 태그에 자식으로 추가하는 것처럼 말이다.
또, 새로운 행과 td 태그를 만들어 innerHTML을 이용하여 데이터를 삽입하고 새로운 행의 자식으로 추가하고
tbody에 추가하는 방법으로 코드를 작성하면 된다.
데이터들을 객체로 만들어서 하나씩 꺼내는 반복문을 사용한다면 코드는 더욱 더 간결해질 것이다.
4. 결과
'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
| [JS] JSON의 정의와 함수 사용 방법 (0) | 2023.02.02 |
|---|---|
| [JS] XMLHttpRequest (0) | 2023.02.01 |
| [JS] 특정 <tr>, <td> 값에 접근하기 (0) | 2023.01.31 |
| [JS] onkeydown, onkeypress 차이점 (0) | 2023.01.31 |
| [JS] input type="checkbox" 일 때 이벤트 핸들러 활용 (0) | 2023.01.30 |
댓글