2012-08-17 45 views
0

我非常非常新的JS和客戶端, 請幫我實現這一目標:需要幫助把新表中的數據,使用JQuery

  1. 我每次添加受數據庫時,我想它出現在表格中。
html 
    {% block main-menu %} 
     <h3>Existing Subjects</h3> 
     <table> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Documents</th> 
        <th>Followers</th> 
        <th>Created</th> 
        <th>Updated</th> 
        <th>Posted By</th> 
       </tr> 
      <tbody> 
      {% if subjects %} 
        <tr id="subject-description-main-menu-list"> 
         <th id="subject-name"></th> 
         <th id="subject-docs"></th> 
         <th id="subject-followers"></th> 
         <th id="subject-created"></th> 
         <th id="subject-updated"></th> 
         <th id="subject-posted-by"></th> 
        </tr> 
      {% endif %} 
      </tbody> 
     </table> 
    {% endblock %} 

,這是我的Jquery:

function fill_subject_table_in_main_content() { 
    $("#subject-description-main-menu-list").text(''); 
    $.get("/subject/list/", function(data){ 
     var FIELDS = ['name', 'num_of_followers', 'created_time', "created_by"]; 
     for(var i=0; i<data.length; i++) { 
      for (var j=0; j<FIELDS.length; j++) { 
       $("#subject-description-main-menu-list").append('<th>'+data[i]['fields'][FIELDS[j]]+'</th>'); 
      } 
     }; 
    }, 'json'); 
} 

數據我通過get方法得到的是正確的,但它出現在一行.....但我希望它成爲一張桌子...

now it looks like this: 
Existing Subjects 
Name Documents Followers Created       Updated Posted By 
Math 140  NONE    1   2012-08-17 08:04:02  NONE  r English 102 1 2012-08-17 08:04:14 r 

回答

1

首先,你要追加header tags到桌上。你會想要「td」。其次,你在$(「#subject-description-main-menu-list」)上調用.append。您應該將行附加到表中並將數據附加到每行。

喜歡的東西:

for(var i=0; i<data.length; i++) { 
var newRow = document.createElement("tr"); 
for (var j=0; j<FIELDS.length; j++) { 
    $(newRow).append('<td>'+data[i]['fields'][FIELDS[j]]+'</td>'); 
} 
$("#yourTableId").append(newRow); 

};

+0

謝謝,它的工作原理 – Vor 2012-08-17 14:38:27