Question

您能帮我解决一下如何将Ajax中的数据追加到现有表格中吗？

在我的HTML中，我有一个Table Like：

<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数组元素的两个基本原则。这些原则如下面的代码所示 - 请阅读我的评论。我想这对我们的社区有用。

＆＃13;

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 ...
   {
    	var rn = $('<tr class=""></tr>');
       //first approach to add data (not flexible)
		rn.append('<td>'+data[i].ProjectID+'</td>');
       	rn.append('<td>'+data[i].RoadLength+'</td>');
       	rn.append('<td>'+data[i].PowerLineLength+'</td>');

    // here add all columns
    $('#example').append(rn);

       //second - right - approach to add data.  
	   //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);
       }
   }

＆＃13;

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; 
   }

＆＃13;

<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>

＆＃13;

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

Answer 4

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 ...
   {
        var rn = $('<tr class=""></tr>');
       //first approach to add data (not flexible)
        rn.append('<td>'+data[i].ProjectID+'</td>');
        rn.append('<td>'+data[i].RoadLength+'</td>');
        rn.append('<td>'+data[i].PowerLineLength+'</td>');

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

       //second - right - approach to add data.  
       //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>

如何将Ajax响应（对象数组）附加到表的Tbody

4 个答案: