[javascript] 동적으로 table 데이터 추가하기

동적으로 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); // 새로운 데이터 덮어쓰기
			
			}
		});