[JQuery]로 테이블에 행 추가하는 방법

jQuery로 테이블에 행 추가하는 방법

안녕하세요, 개발자 여러분! 오늘은 jQuery를 사용해서 테이블에 새로운 행(<tr>)을 추가하는 방법을 알아보겠습니다. 초보자도 쉽게 따라 할 수 있게 간단한 예제와 함께 설명드릴게요!

1. 기본 행 추가 방법

jQuery에서는 append(), prepend(), after() 같은 메소드를 사용해서 테이블에 행을 추가할 수 있어요.

• append(): 테이블 마지막에 행 추가

$("#myTable").append("<tr><td>새 행</td></tr>");

• prepend(): 테이블 처음에 행 추가

$("#myTable").prepend("<tr><td>새 행</td></tr>");

• after(): 특정 행 뒤에 추가

$("#myTable tr:first").after("<tr><td>새 행</td></tr>");

2. 테이블 구조에 맞게 추가하기

보통 테이블은 <thead>와 <tbody>로 나뉘어 있죠. 데이터는 주로 <tbody>에 추가하는 게 일반적이에요.

// tbody에 행 추가
$("#myTable tbody").append("<tr><td>데이터 1</td><td>데이터 2</td></tr>");

3. 동적으로 데이터 추가하기

변수나 입력값을 활용해 동적으로 행을 추가하려면 템플릿 리터럴을 사용하는 게 편리합니다.

let data1 = "새 항목";
let data2 = "추가됨";
$("#myTable tbody").append(`<tr><td>${data1}</td><td>${data2}</td></tr>`);

4. 실습 예제

버튼을 클릭하면 테이블에 새 행이 추가되는 코드를 준비했어요.

<table id="myTable">
    <thead>
        <tr><th>열 1</th><th>열 2</th></tr>
    </thead>
    <tbody>
        <tr><td>기존 1</td><td>기존 2</td></tr>
    </tbody>
</table>
<button id="addRow">행 추가</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $("#addRow").click(function() {
        let newRow = "<tr><td>새 데이터 1</td><td>새 데이터 2</td></tr>";
        $("#myTable tbody").append(newRow);
    });
</script>

5. 추가 팁

• 특정 위치에 삽입: 인덱스를 활용해 원하는 위치에 추가할 수 있어요.

    // 두 번째 행 뒤에 추가
    $("#myTable tbody tr").eq(1).after("<tr><td>중간 삽입</td><td>데이터</td></tr>");
    

• 여러 행 추가: 문자열로 여러 행을 한 번에 붙일 수도 있습니다.

    let rows = "<tr><td>행 1</td><td>A</td></tr>" +
               "<tr><td>행 2</td><td>B</td></tr>";
    $("#myTable tbody").append(rows);
    

마무리

jQuery로 테이블에 행을 추가하는 건 append()나 after()만 알면 금방 할 수 있어요. 위 예제를 참고해서 여러분의 프로젝트에 적용해보세요! 질문 있으면 언제든 댓글로 물어보세요~