[Frontend/HTML] 테이블(table) 태그와 데이터 사용하기

2021. 2. 4. 08:00

꿈가게: To Do List - Android

HTML 언어로 페이지를 만들기 위해서 table 태그를 사용하는 것은 크게 어렵지 않습니다. 다음과 같은 구조로 작성만 하면 원하는 데이터를 볼 수 있습니다.

<table>
  <thead>
    <tr>
      <th>번호</th>
      <th>제목</th>
      <th>작성자</th>
      <th>등록일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>블로그 스킨 변경</td>
      <td>Horong</td>
      <td>2021-02-01</td>
    </tr>
  </tbody>
</table>

하지만, 서버를 사용해야 하는 개발자의 경우에는 다릅니다 ... tbody 태그 아래에 있는 tr 태그를 데이터를 가지고 그때그때 다르게 보여주어야 합니다. 대표적으로 페이지, 검색어, 검색타입, 정렬타입 등에 따라 다르게 보여집니다.

이렇게 다양한 조건으로 데이터를 보여주게 되지만, 그 조건에따라서 데이터를 넘겨주는 것은 서버에서 해야하는 일입니다. 그래서 우리는 서버가 조건에 따라서 다르게 넘겨준 데이터로 어떻게 tbody 태그를 작성할 수 있는지를 알아보겠습니다.

절차는 다음과 같습니다.

1. 서버에서 넘어온 데이터

2. HTML 코드

3. 데이터를 HTML 태그(<tr></tr>)로 만드는 함수

4. 만들어진 태그를 테이블에 붙이는 함수

서버에서 넘어온 데이터

서버에서는 조건에 맞는 데이터를 넘겨줍니다. 이 때, thead 에서 작성한 내용에 따라서 또는 서버에 따라서 데이터 구조가 다를 수 있습니다. 저는 임의대로 no, title, date, writer 4가지 종류로 지정하였습니다.

var serverData = [
  {no:1, title:'[공지] 블로그 스킨 변경 안내문', date: '2021-02-01', writer: 'Horong'},
  {no:2, title:'[공지] 블로그 스킨 변경 안내문', date: '2021-02-01', writer: 'Horong'},
  {no:3, title:'[공지] 블로그 스킨 변경 안내문', date: '2021-02-01', writer: 'Horong'},
  {no:4, title:'[공지] 블로그 스킨 변경 안내문', date: '2021-02-01', writer: 'Horong'},
  {no:5, title:'[공지] 블로그 스킨 변경 안내문', date: '2021-02-01', writer: 'Horong'}
];

HTML 코드

처음에 보여준 것처럼 HTML 코드를 작성하되, tbody 부분은 텅 빈 채로 놔두어야합니다. 그리고 꼭 id 값을 정해주셔야합니다. class 를 table로 해준 이유는 제가 간단하게 테이블의 스타일(가로 100퍼센트)을 적용해두기 위해서입니다.

<table id="table" class="table">
  <thead>
    <tr>
      <th>번호</th>
      <th>제목</th>
      <th>날짜</th>
      <th>작성자</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

데이터를 HTML 태그(<tr></tr>)로 만드는 함수

서버에서 넘겨받은 데이터를 tbody 태그에 붙이기 위해서 데이터를 tr 태그로 만드는 함수를 작성해 보겠습니다. 이 함수는 serverDataList 라는 데이터 배열중에 각각의 데이터를 tr 태그로 고쳐주는 역할을 하는 함수입니다. 추후에 for문을 사용하여 serverDataList를 전부 tr 태그로 고쳐줄 예정입니다.

function toDOM(row) {
  var tr = '';
  tr += '<tr>';
  tr += '  <td>' + row.no + '</td>';
  tr += '  <td>' + row.title + '</td>';
  tr += '  <td>' + row.date + '</td>';
  tr += '  <td>' + row.writer + '</td>';
  tr += '</tr>';
  return tr;
}

만들어진 태그를 테이블에 붙이는 함수

이제 위에서 정의한 데이터를 HTML 태그로 만드는 함수(toDOM)를 통해서 서버에서 받은 데이터(serverDataList)를 원하는 table 태그에 붙여주는 함수를 만들어 보겠습니다. 코드는 다음과 같습니다. 함수의 인자로 데이터를 붙이고싶은 테이블의 아이디(id)와 서버의 테이터(serverDataList)를 넣어주면 그 테이블에 서버의 데이터를 HTML 태그로 만들어서 붙여줍니다.

function renderTable(id, serverDataList){
  var size = serverDataList.length;
  var trList = '';
  for(var i=0; i<size; i++) {
    trList += toDOM(serverDataList[i]);
  }
  document.querySelector('#' + id + ' tbody').innerHTML = trList;  
}

이제 페이지가 로딩되면 renderTable 함수를 호출하여 페이지를 렌더링 할 수 있습니다.

window.onload = function () {
  renderTable("table", serverData);
};

전체코드

지금까지 설명드린 코드를 모두 테스트 해볼 수 있는 샘플 HTML 파일입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- CSS -->
    <style>
      .table {
        border-collapse: collapse;
        border: 1px solid #333;
        width: 100%;
      }
      .table th {
        border: 1px solid #333;
      }
      .table td {
        border: 1px solid #333;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <!-- HTML -->
    <table id="table" class="table">
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
          <th>작성자</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <!-- Javascript -->
    <script>
      var serverData = [
        { no: 1, title: "[공지] 블로그 스킨 변경 안내문", date: "2021-02-01", writer: "Horong" },
        { no: 2, title: "[공지] 블로그 스킨 변경 안내문", date: "2021-02-01", writer: "Horong" },
        { no: 3, title: "[공지] 블로그 스킨 변경 안내문", date: "2021-02-01", writer: "Horong" },
        { no: 4, title: "[공지] 블로그 스킨 변경 안내문", date: "2021-02-01", writer: "Horong" },
        { no: 5, title: "[공지] 블로그 스킨 변경 안내문", date: "2021-02-01", writer: "Horong" },
      ];

      function toDOM(row) {
        var tr = "";
        tr += "<tr>";
        tr += "  <td>" + row.no + "</td>";
        tr += "  <td>" + row.title + "</td>";
        tr += "  <td>" + row.date + "</td>";
        tr += "  <td>" + row.writer + "</td>";
        tr += "</tr>";
        return tr;
      }

      function renderTable(id, dataList) {
        var size = dataList.length;
        var trList = "";
        for (var i = 0; i < size; i++) {
          trList += toDOM(dataList[i]);
        }
        document.querySelector("#" + id + " tbody").innerHTML = trList;
      }

      window.onload = function () {
        renderTable("table", serverData);
      };
    </script>
  </body>
</html>

See the Pen Table - starter level by HongJiseong (@as-you-say) on CodePen.

저작자표시

'Frontend > HTML' 카테고리의 다른 글

[Frontend/HTML] 모달 팝업 만들기 (0)	2021.01.29
[Frontend/HTML] 드롭다운(Select) 만들기 (0)	2021.01.25
[Frontend/HTML] Block을 대체하는 Flex 박스 (0)	2020.12.28

블로그

프로필

카테고리

포스트