2017-03-07 34 views
1

我有三個列表如何創建表與AJAX

Devices =  (Mango, Apple, Orange) 
Lifetime =  (100,200,100) 
Status =  (Yes, No, Yes) 

這些列表分組爲模板

template = { 
    'Device' : Devices, 
    'Lifetime' : Lifetime, 
    'Status' : Status, 
} 

我需要顯示上面的模板在AJAX來創建Web界面表:

DEvices Lifetime Status 
Mango 100   Yes 
Apple 200   No 
Orange 100   Yes 

這怎麼可以在html中使用腳本使用AJAX完成?

<!DOCTYPE html> 

</head> 
<body> 
    <div id="wrapper"> 
     %include navbar.tmpl ovVersion=ovVersion, roverMode=roverMode 

     <div id="page-wrapper"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1 class="page-header">Wireless Sensor</h1> 
       </div> 
      </div> 
      <script> 
       var n_dots = 1; 
       $(document).ready(function() { 
        $.ajax({ 
          dataType: "json", 
          url: "/wirelessSensor/dag", 
          success: updateForData, 
          error: errorOnAjax 
         }); 

        function updateForData(json) {    

        $("div").html("<table><tr><th>Devices></th><th>Lifelist</th><th>Status</th></tr>"); 
        $.each(json.devices, function(index, value) { 
         $("div").append("<tr><td>" + value + "</td><td>" + json.lifelist[index] + "<td></td><td>" + json.status[index] + "</td></tr>"); 
         }); 
        $("div").html("</table>"); 

       } 

       function errorOnAjax(jqxhr, status, errorstr) { 
        var errText = (errorstr == null) 
          ? '' : ', error: ' + errorstr; 
        console.log('Ajax error: ' + status + errText); 
       }   

      }); 

      </script> 


     </div> 
    </div> 
</body> 

我試圖做這樣的。但你猜我在語法問題

+0

你應該看看[這裏](http://stackoverflow.com/questions/1413952/how-爲你的答案創建一個新的表與行使用jquery和包裝裏面的div)。 – Catman155

回答

0

使用jQuery的每個功能遍歷元素

$("div").html("<table><tr><th>Fruits></th><th>Price</th><th>Available</th></tr>"); 
$.each(Fruits, function(index, value) { 
    $("div").append("<tr><td>" + value + "</td><td>" + Price[index] + "<td></td><td>" + Available[index] + "</td></tr>"); 
    }); 
$("div").html("</table>"); 
+0

我試着運行這個內部的腳本標記,但得到錯誤。 – NTP

+0

你有什麼錯誤,給我看你的代碼 –