개발일지/Javascript & jQuery
[javascript] 동적으로 table 데이터 추가하기
chi_chi
2020. 8. 26. 14:53
동적으로 table 데이터 추가하기
예제1) javascript 배열 데이터 table에 나타내기
- javascript
function tableCreate(){
var table_value = new Array();
var html = '';
table_value.push({value : '25.5', time : '2020-08-26'});
table_value.push({value : '22.4', time : '2020-08-26'});
table_value.push({value : '10.58', time : '2020-08-26'});
table_value.push({value : '3.44', time : '2020-08-26'});
table_value.push({value : '8.5', time : '2020-08-26'});
for(i in table_value){
html += '<tr>';
html += '<td>'+table_value[i].value+'</td>';
html += '<td>'+table_value[i].time+'</td>';
html += '</tr>';
}
$("#kgTable").empty();
$("#kgTable").append(html);
}
- html
<table id="kgTable">
<thead>
<tr>
<th>중량값</th>
<th>작동 시간</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button onclick="tableCreate()">table_append</button>
예제2) javascript ajax for문 데이터 table로 나타내기
$.ajax ({
url : "url",
cache : false,
async:false,
success : function (data) {
var html = '';
for(var i=0; i<Object.keys(data.data).length; i++ ){
$('#kgTable > tbody').empty(); //기존 테이블데이터 삭제
html += '<tr>';
html += '<td>'+data.data[i].kg_value+'</td>';
html += '<td>'+ data.data[i].time+'</td>';
html += '</tr>';
}
$("#kgTable").append(html); // 새로운 데이터 덮어쓰기
}
});