如何將Ajax響應（數組對象）添加到表中的Tbody

Question

您能否幫我解決如何將從Ajax接收的數據追加到現有表的tbody中？

在我的HTML我有一個表所示：

<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
    <th valign="middle" class="c-font">Projects </th> 
    <th valign="middle" class="c-font">Road Length (Km)</th> 
    <th valign="middle" class="c-font">Powerline Length (Km)</th> 
    <th valign="middle" class="c-font">Penstock (Km)</th> 
    <th valign="middle" class="c-font">Installed Capacity (MW)</th> 
    <th valign="middle" class="c-font">Annual Firm Energy (GW/h)</th> 
    <th valign="middle" class="c-font">Cost of Energy ($/MWh)</th> 
    <th valign="middle" class="c-font">Footprint (Km)</th> 
    <th valign="middle" class="c-font">Cost Per Year ($)</th> 
    </tr> 
    </thead> 
    <tbody> </tbody> 
</table> 

和js文件就像

request.done(function(data) { 
    console.log(data); 
}); 

這在控制檯輸出看起來像

這些都是值將被放置在>tr><td></td></tr>

AnnualFirmEnergy: "91.2335550" 
CostOfEnergy: "183.835765" 
CostPerYear: "16771990.38" 
Footprint: "182.3077770" 
InstalledCapacity: "31.320802" 
Penstock: "5000.000000" 
PowerLineLength: "37.384781" 
ProjectID: "12910" 
RoadLength: "29.350976" 

Answer 1

嘗試使用$.each()

request.done(function(data) { 
    $.each(data, function(key, value) { 
     var tr = $("<tr />") 
    $.each(value, function(k, v) { 
     tr.append(
     $("<td />", { 
      html: v 
      })[0].outerHTML 
     ); 
     $("table tbody").append(tr) 
    }) 
    }) 
}); 

的jsfiddle https://jsfiddle.net/11p7e3z6/

Answer 2

讓我告訴訪問的兩個基本原則，以JSON數組的元素。 這些原則顯示在下面的代碼 - 請閱讀我的意見。 我想這對我們的社區會有幫助。

var data = {1:{AnnualFirmEnergy: "91.2335550", 
 
CostOfEnergy: "183.835765", 
 
CostPerYear: "16771990.38", 
 
Footprint: "182.3077770", 
 
InstalledCapacity: "31.320802", 
 
Penstock: "5000.000000", 
 
PowerLineLength: "37.384781", 
 
ProjectID: "12910", 
 
RoadLength: "29.350976"},2:{AnnualFirmEnergy: "91.2335550", 
 
CostOfEnergy: "183.835765", 
 
CostPerYear: "16771990.38", 
 
Footprint: "182.3077770", 
 
InstalledCapacity: "31.320802", 
 
Penstock: "5000.000000", 
 
PowerLineLength: "37.384781", 
 
ProjectID: "12910", 
 
RoadLength: "29.350976"},3:{AnnualFirmEnergy: "91.2335550", 
 
CostOfEnergy: "183.835765", 
 
CostPerYear: "16771990.38", 
 
Footprint: "182.3077770", 
 
InstalledCapacity: "31.320802", 
 
Penstock: "5000.000000", 
 
PowerLineLength: "37.384781", 
 
ProjectID: "12910", 
 
RoadLength: "29.350976"}} 
 

 
for(var i in data) //i = 1, 2, 3 ... 
 
    { 
 
    \t var rn = $('<tr class=""></tr>'); 
 
     //first approach to add data (not flexible) 
 
\t \t rn.append('<td>'+data[i].ProjectID+'</td>'); 
 
     \t rn.append('<td>'+data[i].RoadLength+'</td>'); 
 
     \t rn.append('<td>'+data[i].PowerLineLength+'</td>'); 
 

 
    // here add all columns 
 
    $('#example').append(rn); 
 

 
     //second - right - approach to add data. 
 
\t //in this casу data in your JSON array 
 
     //have had order like your table head arrangement 
 
     var rd = $('<tr class=""></tr>'); 
 
     var o=data[i]; 
 

 
     for(var j in o)//j='AnnualFirmEnergy', ... 
 
     { 
 
      rd.append('<td>'+o[j]+'</td>'); 
 
      $('#example').append(rd); 
 
     } 
 
    }

TABLE { 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    border-bottom: none; 
 
    } 
 
    TD, TH { 
 
    padding: 3px; 
 
    } 
 
    TH { 
 
    text-align: left; 
 
    background: black; 
 
    color: white; 
 
    border: 1px solid white; 
 
    } 
 
    TD { 
 
    border-bottom: 1px solid black; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" > 
 
    <thead> 
 
    <tr> 
 
    <th valign="middle" class="c-font">Projects </th> 
 
    <th valign="middle" class="c-font">Road Length (Km)</th> 
 
    <th valign="middle" class="c-font">Powerline Length (Km)</th> 
 
    <th valign="middle" class="c-font">Penstock (Km)</th> 
 
    <th valign="middle" class="c-font">Installed Capacity (MW)</th> 
 
    <th valign="middle" class="c-font">Annual Firm Energy (GW/h)</th> 
 
    <th valign="middle" class="c-font">Cost of Energy ($/MWh)</th> 
 
    <th valign="middle" class="c-font">Footprint (Km)</th> 
 
    <th valign="middle" class="c-font">Cost Per Year ($)</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> </tbody> 
 
</table>

Answer 3

如果不使用某種模板引擎的數據克隆到DOM，你會很快陷入雜亂難以維護的代碼的迷宮。

下面是一個使用dna.js引擎的例子，我參與了一個庫，但這種方法很常見。其基本思想是在HTML中定義數據字段，然後將JSON數據傳遞給引擎進行克隆。

HTML

<table id=example> 
    <thead> 
     <tr> 
     <th>Projects</th> 
     <th>Road Length (Km)</th> 
     <th>Powerline Length (Km)</th> 
     <th>Penstock (Km)</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id=energy> 
     <td>~~AnnualFirmEnergy~~</td> 
     <td>~~CostOfEnergy~~</td> 
     <td>~~CostPerYear~~</td> 
     <td>~~Footprint~~</td> 
     </tr> 
    </tbody> 
</table> 
... 
<script src=https://cdn.jsdelivr.net/jquery/3.2/jquery.min.js></script> 
<script src=https://cdn.jsdelivr.net/dna.js/1.2/dna.min.js></script> 

的JavaScript

function handle(data) { dna.clone('energy', data); } 
request.done(handle); 

是的，就這麼簡單。請注意，JS中沒有HTML，因此JS更容易維護，HTML更易於設計。

撥弄代碼：
http://jsfiddle.net/tw37poyw/2