[jQuery] 테이블 내용 업데이트(삭제, 추가)하는 코드

1. 시험환경

    - javascript, jQuery, ajax

 

2. 목적

    - 테이블 데이터를 javascript로 직접 코딩하여 json, jsonArray 형식으로 저장한다.

 

3. 적용

 

function createTable() {
    console.log("=== createTable() ===");

    var theadLength = $('#markerTable > thead > tr').length
    var tbodyLength = $('#markerTable > tbody > tr').length

    // remove body rows
    if(tbodyLength > 0)
    {
        $('#markerTable > tbody > tr').remove();            // 테이블 body 부분 기존 내용 삭제
    }

    // create header
    if(theadLength == 0)
    {
        var tblHead = '';
        for(var i = 0; i < header.length; i++)
        {
            tblHead += '<td>' + header[i] + '</td>'
        }
        $('#markerTable > thead').append('<tr>' + tblHead + '</tr>');        // 테이블 최초 생성시 header 부분 추가
    }

    // create body rows
    for(var i = 0; i < csvRespList.length; i++)
    {
        var tblRow = '';
        var item = csvRespList[i];
        for(var j = 0; j < header.length; j++)
        {
            tblRow += '<td>' + item[header[j]] + '</td>'
        }
        $('#markerTable > tbody:last').append('<tr>' + tblRow + '</tr>');        // 테이블 body 부분 추가
    }
}

 

 

4. 결론

    - jsGrid와 같이 잘 만들어진 table library를 사용하자.

 

 

※ 내용이 도움 되셨다면 광고 클릭 한번 부탁드립니다.