[jQuery] 동적으로 테이블 행추가

 jQuery에서 동적으로 테이블 내에 행을 추가하는 방법에 대해 알아보자.

자바스크립트 소스

$(document).on('click',"[name=testCode]",function(){

    $.ajax({

        url: "/admin/test1/test2/selectTest.do",

        method : 'POST',

        data: {"testCd": $(this).attr("value")},

        dataType:"json",

        success: function(result) {

            var resultHtml = "";

            for(var i = 0; i < result.length; i ++) {

                resultHtml += "<tr>";

                resultHtml += '<td>'+result[i].test+'</td>';

                resultHtml += '<td>'+result[i].test1+'</td>';

                resultHtml += '<td style="text-align: left;">'+result[i].test2+'</td>';

                resultHtml += '<td>'+result[i].test3+'</td>';

                resultHtml += '<td>'+result[i].test4+'</td>';

                resultHtml += '</tr>';

            }

            $("#testBody tbody").html(resultHtml);

        },

        error: function(req, status, xhr){

            console.log("error:"+error);

        }

    });

});

jsp 소스

<table id="testBody">

    <colgroup>

        <col width="3%">

        <col width="15%">

        <col width="42%">

        <col width="20%">

        <col width="18%">

    </colgroup>

    <tbody>

        <tr>

            <td colspan="5">데이터가 없습니다.</td>

        </tr>

    </tbody>

</table>

 데이터를 불러와 동적으로 html코드를 만든 후, html 함수를 이용해 행을 추가하면 된다. 추가적으로 현재 있는 행을 삭제하지 않고 추가할 때에는 append 함수를 이용하면 된다.

관련글 더 보기

 2018/09/07 - [jQuery] 동적으로 태그(tag) 추가하기 (html, append)

 2018/09/06 - [jQuery] 보이기 및 숨기기 기능 (Show / Hide)

↓ 공감 을 눌러주시면 블로거에게 큰 힘이 됩니다 !