자바스크립트로 동적 테이블 만들기

완성버전 :실행버튼을 누르면 아래 테이블이 출력

1. HTML을 이런 상태로 만들어준다 (빈HTML이기에 출력되지 않는다)

<table id="Q3_table">
          <thead>
            <tr id="Q3_thead"></tr>
          </thead>
          <tbody id="Q3_tbody">
          </tbody>
</table>

2. 헤딩부분 작성

const headlist = [
    "emp_no",
    "first_name",
    "last_name",
    "gender",
    "hire_date",
    "dept_name",
    "title",
    "max_salary",
  ];

  const thead = document.getElementById("Q3_thead");
  for (i = 0; i < headlist.length; i++) {
    let headrow = `<th>${headlist[i]}</th>`;
    thead.innerHTML += headrow;
  }

3.바디 부분 작성 

const tbody = document.getElementById("Q3_tbody");
  for (i = 0; i < data.length; i++) {
    let hire_date = formatDate(data[i].hire_date); //date형식 포맷 함수
    let row = `<tr>
                      <td>${data[i].emp_no}</td>
                      <td>${data[i].first_name}</td>
                      <td>${data[i].last_name}</td>
                      <td>${data[i].gender}</td>
                      <td>${hire_date}</td>
                      <td>${data[i].dept_name}</td>
                      <td>${data[i].title}</td>
                      <td>${data[i].salary}</td>
                     </tr>`;
    tbody.innerHTML += row;
  }