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

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

728x90

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 += '' + header[i] + ''

}

$('#markerTable > thead').append('' + tblHead + ''); // 테이블 최초 생성시 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 += '' + item[header[j]] + ''

}

$('#markerTable > tbody:last').append('' + tblRow + ''); // 테이블 body 부분 추가

}

}

4. 결론

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

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

728x90

from http://languagestory.tistory.com/107 by ccl(A) rewrite - 2021-11-08 20:02:21