테이블에 자바 스크립트 데이터

Question

일부 HTML, JSON 및 Javascript가 있습니다. 3 행으로 구성된 테이블을 렌더링하려고합니다 (JSON 기준). 문제는 내 모든 데이터가 내가 여기

<table> 
<tbody> 
    <tr> 
     <td>car</td> 
     <td>1000</td> 
     <td>2000</td> 
     <td>1500</td> 
     <td>1000</td> 
    </tr> 
    <tr> 
     <td>house</td> 
     <td>500</td> 
     <td>600</td> 
     <td>700</td> 
     <td>800</td> 
    </tr> 
    <tr> 
     <td>internet</td> 
     <td>100</td> 
     <td>200</td> 
     <td>2350</td> 
     <td>1940</td> 
    </tr> 
</tbody></table> 

내 코드 HTML입니다 원하는

<table> 
<tbody> 
    <tr> 
     <td>car</td> 
     <td>1000</td> 
     <td>2000</td> 
     <td>1500</td> 
     <td>1000</td> 
     <td>house</td> 
     <td>500</td> 
     <td>600</td> 
     <td>700</td> 
     <td>800</td> 
     <td>internet</td> 
     <td>100</td> 
     <td>200</td> 
     <td>2350</td> 
     <td>1940</td> 
    </tr> 
</tbody> 
</table> 

한 TR에서 TD의에서 오는 것입니다

<div class="calc"></div> 

JSON

{ 
"item": [ 
    { 
     "name": "car", 
     "cost": [1000, 2000, 1500, 1000] 
    }, 
    { 
     "name": "house", 
     "cost": [500, 600, 700, 800] 
    }, 
    { 
     "name": "internet", 
     "cost": [100, 200, 2350, 1940] 
    } 
] 
} 

자바 스크립트 t

$.getJSON("calc.json", function(data) { 

    var $table = $('<table/>'), 
     $row = $('<tr/>'); 

    for(var i = 0; i < data.item.length; i ++){ 
     $row.append('<td>' + data.item[i].name + '</td>'); 

     for (var cost = 0; cost < data.item[i].cost.length; cost ++) { 
      $row.append('<td>' + data.item[i].cost[cost] + '</td>'); 
     } 
    } 

    $('.calc').append($table.append($row)); 

}); 

편집 덜 코드 집중적 버전

$.getJSON("calc.json", function(data) { 

    var $table = $("<table/>"); 

    $.each(data.item, function(k,v) { 
     var $row = $("<tr/>"); 
     $row.append("<td>" + v.name + "</td>"); 

     $.each(v.cost, function(k,v) { 
      $row.append("<td>" + v + "</td>"); 
     }); 

     $table.append($row); 

    }); 

    $(".calc").append($table); 

}); 

Answer 1

안녕하세요 난 당신이 조금 작동하지만 지금은 당신이 아래에 주어진 사용할 수있는 기능이 변경되었습니다 -

$.getJSON("calc.json", function(data) { 

     var $table = $('<table/>'); 


     for(var i = 0; i < data.item.length; i ++){ 
      var $row = $('<tr/>'); 
      $row.append('<td>' + data.item[i].name + '</td>'); 

      for (var cost = 0; cost < data.item[i].cost.length; cost ++) { 
       $row.append('<td>' + data.item[i].cost[cost] + '</td>'); 
      } 
      $table.append($row); 
     } 

     $('.calc').append($table); 

    }); 

Answer 2

var $table = $('<table/>'); 

for(var i = 0; i < data.item.length; i ++){ 
    var $row = $('<tr/>'); 
    $row.append('<td>' + data.item[i].name + '</td>'); 

    for (var cost = 0; cost < data.item[i].cost.length; cost ++) { 
     $row.append('<td>' + data.item[i].cost[cost] + '</td>'); 
    } 
    $table.append($row) 
} 

$('.calc').append($table); 

Demo

Answer 3

문제는 모든 항목에 대해 하나의 행만 선언했기 때문입니다.

각 항목에 대해 새 행을 만듭니다.

다음과 같이 기능을 변경하십시오.

$.getJSON("calc.json", function(data) { 

    var $table = $('<table/>'); 

    for(var i = 0; i < data.item.length; i ++){ 
     var $row = $('<tr/>'); //new Row for current ITEM 
     $row.append('<td>' + data.item[i].name + '</td>'); 

     for (var cost = 0; cost < data.item[i].cost.length; cost ++) { 
      $row.append('<td>' + data.item[i].cost[cost] + '</td>'); 
     } 
     $table.append($row); // append current row 
    } 
    $('.calc').append($table); 
});