JavaScript를 사용하여 테이블 만들기
JavaScript 프로그래밍 언어를 사용하면 DOM (Document Object Model) 요소를 만들고 조작 할 수 있습니다. 이는 우리에게 훨씬 더 많은 유연성을 제공하고 특히 백엔드 개발자 인 경우 모든 사람이 DOM을 사용하는 것을 훨씬 쉽게 만듭니다.
HTML 문서에 테이블과 같은 HTML 요소를 추가하는 두 가지 방법이 있습니다. 첫 번째는 HTML 웹 페이지에 HTML 테이블 태그를 직접 추가하는 것이고 두 번째 방법은 JavaScript 코드 내에 전체 테이블을 만드는 것입니다. 두 번째 옵션은 테이블을 생성하고 DOM에 추가하는 가장 일반적인 방법입니다.
그러나 JavaScript로 테이블을 만드는 방법에 대해 자세히 알아보기 전에 먼저 테이블을 만드는 데 사용되는 다양한 테이블 태그와 각 태그가 정확히 무엇을 의미하는지 시각적으로 이해해 보겠습니다. 이렇게하면 테이블을 시각적으로 표현하여이 기사 뒷부분의 코드 부분을 훨씬 쉽게 이해할 수 있습니다.
HTML로 표를 만드는 데 사용되는 다양한 태그
다음은 HTML로 표를 만드는 데 사용되는 태그 목록입니다.
table:tableHTML 태그는 HTML의 전체 테이블을 나타냅니다. 이것은 테이블을 구성하려는 방식에 따라 테이블과 관련된 다른 모든 태그 (예 :thead,tr,td등)가 사용되는 테이블의 시작 태그입니다.thead:thead는 테이블 제목을 나타냅니다. 이 태그는 표에 제목을 추가하는 데 사용됩니다. 일반적으로 테이블의 첫 번째 행을 나타냅니다.thead태그 안에 데이터를 추가하기 위해th태그를 사용합니다. 표에 제목을 추가하지 않으려면thead태그를 건너 뛸 수 있습니다.tbody:tbody는 테이블 본문을 나타냅니다. 이 태그는 전체 본문 또는 표의 내용을 나타냅니다.tfoot:tfoot은 테이블 바닥 글을 나타냅니다. 일반적으로 테이블의 마지막 행을 나타냅니다. 이 태그는 선택 사항입니다. 우리는이 태그를 자주 사용하지 않습니다.tr:tr은 테이블 행을 나타냅니다. 이것은 테이블의 전체 행을 나타냅니다. 테이블의 머리글, 본문 또는 바닥 글 내부에 데이터를 삽입하려면 먼저 행을 만든 다음 해당 행 안에td태그를 사용하여 데이터를 삽입 할 수 있습니다.th:th는thead태그 내에서만 사용됩니다. 표제 행의 단일 셀을 나타냅니다. 표의 제목을 굵게 표시합니다.td:td는 테이블 데이터를 나타냅니다. 테이블의 단일 셀을 나타냅니다.th와 유사하지만th는thead태그 내에서만 사용되고td는 다른 곳에서 사용된다는 점만 다릅니다.td태그는tbody및tfoot태그와 함께 사용할 수 있습니다.
이 모든 태그를 중첩 된 형태, 즉 다른 태그 안에 결합하면 table이 생성 된 후의 모양이됩니다.
빨간색 테두리는 전체 테이블을 나타냅니다. 이 안에는 3 개의 태그, 테이블 헤더 (thead), 테이블 본문 (tbody), 테이블 바닥 글 (tfoot)이 있으며, 이는 녹색 테두리로 표시됩니다. 이 세 태그 안에 데이터를 삽입하려면 먼저tr태그를 사용하여 행을 만들어야합니다. 이 행은 노란색 테두리로 표시됩니다. 그런 다음 테이블 헤더에 데이터를 삽입하려면th태그를 사용하고 테이블 본문 또는 테이블 바닥 글에 데이터를 삽입하려면td태그를 사용합니다. 회색의 도움으로 표시됩니다.
JavaScript를 사용하여 테이블 만들기
JavaScript를 사용하여 HTML 요소를 생성하려면 문자열 인 태그 이름을 매개 변수로 사용하는document.createElement()라는 메소드를 사용해야합니다. 예를 들어, 테이블을 생성하고자하므로createElement()메소드document.createElement('table')에 대한 입력으로table문자열을 전달합니다.
이제 완전히 JavaScript를 사용하여 아래 표를 만들어 보겠습니다.
| Sr. No. | 이름 | 회사 |
|---|---|---|
| 1. | 제임스 클러 크 | 넷플릭스 |
| 2. | 아담 화이트 | 마이크로 소프트 |
위의 표에는 4 개의 행이 있습니다. 첫 번째 행에는 모든 제목이 포함되고 다음 세 행에는 데이터가 포함됩니다.
아래에는 HTML, CSS 및 JS 코드가 있습니다. body태그 안에는 처음에는 아무것도 없습니다. JavaScript 내부에 테이블을 만들고 마지막에 전체 테이블을body태그에 추가하여 웹 페이지에 표시되도록합니다. style태그 내에서 테이블에 몇 가지 기본 스타일을 지정했습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border-collapse: collapse;
border-spacing: 0;
}
th, td{
padding: 10px 20px;
border: 1px solid #000;
}
</style>
</head>
<body id="body">
<script src="script.js"></script>
</body>
</html>
테이블을 생성하기 위해 먼저table태그를 생성합니다. 그런 다음 나중에 사용할 수 있도록이 태그를 변수table에 저장합니다. 같은 방식으로thead및tbody태그도 생성하여 변수 안에 저장합니다. 그런 다음thead및tbody를table태그에 추가합니다.
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');
table.appendChild(thead);
table.appendChild(tbody);
// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);
JavaScript로 만든 테이블을body태그에 추가하거나 추가해야합니다. 먼저id를 사용하여 HTML 본문 태그를 가져온 다음appendChild()메서드를 사용하여 테이블을 추가합니다. 이미table변수에 테이블을 저장 했으므로이 본문 요소에 자식으로 만든 테이블을 추가하면됩니다.
이 시점에서 테이블의 구조는 다음과 같습니다.
테이블에 행과 데이터를 추가하기 위해createElement()메소드를 사용하여 테이블 행 (tr), 테이블 제목 (th) 및 테이블 데이터 (td) 태그를 만든 다음 innerHTML속성을 사용하여 해당 요소 내부에 데이터를 추가합니다.
// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = 'Sr. No.';
let heading_2 = document.createElement('th');
heading_2.innerHTML = 'Name';
let heading_3 = document.createElement('th');
heading_3.innerHTML = 'Company';
row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);
// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = '1.';
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = 'James Clerk';
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = 'Netflix';
row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);
// Creating and adding data to third row of the table
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = '2.';
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML = 'Adam White';
let row_3_data_3 = document.createElement('td');
row_3_data_3.innerHTML = 'Microsoft';
row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
row_3.appendChild(row_3_data_3);
tbody.appendChild(row_3);
innerHTML속성을 사용하여 데이터를 삽입 한 후 해당 데이터를 해당 행에 추가합니다. 예를 들어, 먼저row_1에 제목 (즉,heading_1,heading_2,heading_3)을 추가합니다. 그런 다음 첫 번째 행, 즉row_1을thead태그에 자식으로 추가합니다.
마찬가지로row_2및row_3과 같은 또 다른 2 개의 행을 생성 한 다음 (row_2_data_1,row_2_data_2,row_2_data_3) 및 (row_3_data_1,row_3_data_2,row_3_data_3) 변수를 각각 추가합니다. 2 열. 마지막으로이 2 개의 행을tbody태그에 추가합니다.
이제 이것은 개발자 콘솔에서 테이블과 HTML 구조가 어떻게 보이는지입니다.
왼쪽에는 테이블이 있고 오른쪽에는 브라우저에서 생성 된 코드가 있습니다. 원하는 테이블 모양에 따라 js 코드를 사용자 정의 할 수 있습니다. 이를 달성하기 위해 3 개의 JavaScript 메소드 (createElement(),innerHTML,appendChild()) 만 사용했습니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn