jQuery를 활용한 동적 HTML 테이블 생성과 행 추가

by

HTML 테이블은 데이터를 효과적으로 표시하는 데 자주 사용됩니다. 때로는 사용자가 버튼을 클릭할 때마다 테이블에 행을 동적으로 추가해야 할 때가 있습니다. 이 블로그 포스팅에서는 jQuery를 사용하여 동적으로 HTML 테이블을 생성하고 버튼 클릭 시 테이블에 행을 추가하는 방법을 자세히 알아보겠습니다.


1. 테이블 및 버튼 요소 생성

먼저, 새로운 테이블과 버튼을 생성합니다.

var table = $("<table></table>");
var addButton = $("<button>Add Row</button>");


2. 테이블 헤더 생성

테이블의 헤더(제목 행)를 생성합니다.

var thead = $("<thead></thead>");
var headerRow = $("<tr></tr>");

headerRow.append("<th>제목 1</th>");
headerRow.append("<th>제목 2</th>");

thead.append(headerRow);


3. 테이블 바디 생성

테이블의 본문(데이터 행)을 생성합니다.

var tbody = $("<tbody></tbody>");


4. 테이블 초기 데이터 추가

초기로 몇 개의 데이터 행을 추가합니다.

function addDataRow() {
  var dataRow = $("<tr></tr>");
  dataRow.append("<td>새로운 데이터 1</td>");
  dataRow.append("<td>새로운 데이터 2</td>");
  tbody.append(dataRow);
}

addDataRow();
addDataRow();
addDataRow();

위 예제에서는 addDataRow() 함수를 사용하여 테이블에 초기 데이터 행을 추가합니다. 이 함수는 필요에 따라 호출할 수 있습니다.


5. 버튼 클릭 시 행 추가

버튼을 클릭할 때마다 테이블에 새로운 데이터 행을 추가하는 이벤트 핸들러를 등록합니다.

addButton.click(function() {
  addDataRow();
});


6. 결과를 화면에 추가

생성한 테이블과 버튼을 화면에 추가합니다.

$("#tableContainer").append(table);
$("#buttonContainer").append(addButton);

위 코드에서 #tableContainer는 테이블을 추가할 대상 컨테이너 요소의 선택자이고, #buttonContainer는 버튼을 추가할 대상 컨테이너 요소의 선택자입니다.

이제 버튼을 클릭하면 테이블에 새로운 데이터 행이 추가됩니다. jQuery를 활용하여 동적으로 HTML 테이블을 생성하고 행을 추가함으로써 데이터를 효과적으로 표시하고 관리할 수 있습니다.



Leave a Comment