JavaScript로 동적 테이블 생성: rowspan, colspan 구현 가이드

웹 애플리케이션에서 데이터를 동적으로 렌더링할 때, 테이블 형식으로 데이터를 표현하는 경우가 많습니다. 특히, 데이터 구조에 따라 테이블의 셀을 합치기 위해 rowspan과 colspan을 동적으로 설정해야 하는 경우가 있습니다. 이 글에서는 JavaScript를 활용하여 데이터셋 기반으로 동적 테이블을 생성하고 rowspan과 colspan을 적용하는 다양한 예제를 상세히 설명합니다.

---

1. 기본적인 동적 테이블 생성

먼저 간단한 데이터셋을 기반으로 동적 테이블을 생성하는 기본 방법을 살펴봅니다.

데이터셋 예제

const data = [
  { name: "Alice", age: 25, department: "HR" },
  { name: "Bob", age: 30, department: "Engineering" },
  { name: "Charlie", age: 35, department: "HR" }
];

동적 테이블 생성 코드

function createTable(data) {
  const table = document.createElement("table");
  table.border = "1";

  // 헤더 생성
  const headerRow = table.insertRow();
  const headers = ["Name", "Age", "Department"];
  headers.forEach(headerText => {
    const th = document.createElement("th");
    th.textContent = headerText;
    headerRow.appendChild(th);
  });

  // 데이터 행 생성
  data.forEach(item => {
    const row = table.insertRow();
    Object.values(item).forEach(text => {
      const cell = row.insertCell();
      cell.textContent = text;
    });
  });

  document.body.appendChild(table);
}

createTable(data);

결과: 기본적인 HTML 테이블이 생성됩니다.

---

2. rowspan 동적으로 설정하기

rowspan은 같은 열에서 연속된 셀을 병합할 때 사용됩니다. 이를 동적으로 설정하려면 데이터셋을 분석하여 병합해야 할 셀을 결정해야 합니다.

데이터셋 예제

const dataWithRowspan = [
  { department: "HR", name: "Alice", age: 25 },
  { department: "HR", name: "Charlie", age: 35 },
  { department: "Engineering", name: "Bob", age: 30 }
];

rowspan 적용 코드

function createTableWithRowspan(data) {
  const table = document.createElement("table");
  table.border = "1";

  const headerRow = table.insertRow();
  const headers = ["Department", "Name", "Age"];
  headers.forEach(headerText => {
    const th = document.createElement("th");
    th.textContent = headerText;
    headerRow.appendChild(th);
  });

  let previousDepartment = null;
  let rowspanCount = 0;
  let departmentCell = null;

  data.forEach((item, index) => {
    const row = table.insertRow();

    if (item.department === previousDepartment) {
      rowspanCount++;
      if (departmentCell) {
        departmentCell.rowSpan = rowspanCount;
      }
    } else {
      previousDepartment = item.department;
      rowspanCount = 1;
      departmentCell = row.insertCell();
      departmentCell.textContent = item.department;
    }

    const nameCell = row.insertCell();
    nameCell.textContent = item.name;

    const ageCell = row.insertCell();
    ageCell.textContent = item.age;
  });

  document.body.appendChild(table);
}

createTableWithRowspan(dataWithRowspan);

결과: 동일한 department 값을 가진 행이 rowspan을 적용하여 병합됩니다.

---

3. colspan 동적으로 설정하기

colspan은 동일한 행에서 연속된 셀을 병합할 때 사용됩니다. 이를 동적으로 설정하려면 데이터셋에 병합 규칙을 정의해야 합니다.

데이터셋 예제

const dataWithColspan = [
  { category: "Fruit", items: ["Apple", "Banana"] },
  { category: "Vegetable", items: ["Carrot"] },
  { category: "Grain", items: ["Rice", "Wheat", "Corn"] }
];

colspan 적용 코드

function createTableWithColspan(data) {
  const table = document.createElement("table");
  table.border = "1";

  data.forEach(item => {
    const row = table.insertRow();

    const categoryCell = row.insertCell();
    categoryCell.textContent = item.category;

    const itemsCell = row.insertCell();
    itemsCell.textContent = item.items.join(", ");
    itemsCell.colSpan = item.items.length;
  });

  document.body.appendChild(table);
}

createTableWithColspan(dataWithColspan);

결과: 각 category에 대해 항목 수에 따라 colspan이 적용된 테이블이 생성됩니다.

---

4. rowspan과 colspan을 함께 사용하기

동시에 rowspan과 colspan을 적용하면 더욱 복잡한 테이블 구조를 만들 수 있습니다.

데이터셋 예제

const complexData = [
  { region: "Asia", country: "Korea", cities: ["Seoul", "Busan"] },
  { region: "Asia", country: "Japan", cities: ["Tokyo"] },
  { region: "Europe", country: "France", cities: ["Paris", "Lyon"] }
];

rowspan과 colspan 동시 적용 코드

function createComplexTable(data) {
  const table = document.createElement("table");
  table.border = "1";

  let previousRegion = null;
  let regionRowspan = 0;
  let regionCell = null;

  data.forEach(item => {
    const row = table.insertRow();

    if (item.region === previousRegion) {
      regionRowspan++;
      if (regionCell) {
        regionCell.rowSpan = regionRowspan;
      }
    } else {
      previousRegion = item.region;
      regionRowspan = 1;
      regionCell = row.insertCell();
      regionCell.textContent = item.region;
    }

    const countryCell = row.insertCell();
    countryCell.textContent = item.country;

    const citiesCell = row.insertCell();
    citiesCell.textContent = item.cities.join(", ");
    citiesCell.colSpan = item.cities.length;
  });

  document.body.appendChild(table);
}

createComplexTable(complexData);

결과: region과 country를 기준으로 rowspan과 colspan이 적용된 테이블이 생성됩니다.

---

5. 결론

JavaScript를 사용하면 동적 데이터 구조에 따라 rowspan과 colspan을 유연하게 적용할 수 있습니다. 위의 예제를 활용하면 다양한 데이터셋에 맞는 테이블을 쉽게 구현할 수 있습니다. 이를 프로젝트에 적용해 실전에서 활용해 보세요!