Tablo çizmek için jQuery'yi kullanın

Question

Şu anda, jQuery'yi kullanarak bir tablo çizmeye çalışıyorum ancak çalışmaz. Bu geçerli js kodudur. Ben append kullanmayı denedim ama tablo için işe yaramadı. Birisi bana bu konuda yardımcı olabilir. Teşekkür ederim.

(function(){ 
    var location = new Array(); 
    var query = '%23CM0655'; 
    var url = "search.php"; 
    $.post(url, {query:query}, function(tweets){ 
     console.log(tweets); 
     $("#tweetResult").html(""); 
     var geoEnabled = false; 
     var placeName = ""; 
     var countryName = ""; 
     for(var i=0; i<tweets.statuses.length; i++){ 
      var img = $("<img src='" + tweets.statuses[i].user.profile_image_url + "' class='tweetpic'/>"); 
      $("#tweetResult").append(img); 
      $("#tweetResult").append('<br/>'); 
      $("#tweetResult").append(tweets.statuses[i].user.screen_name); 
      $("#tweetResult").append(tweets.statuses[i].text + "<br/>"); 
      geoEnabled = tweets.statuses[i].user.geo_enabled; 
      if(geoEnabled){ 
       placeName = tweets.statuses[i].place.name; 
       countryName = tweets.statuses[i].place.country; 
       if(placeName != null){ 
        $("#tweetResult").append(placeName + ", "); 
        $("#tweetResult").append(countryName + "<br/>"); 
       } 
       $("#tweetResult").append("Location: " + tweets.statuses[i].place.bounding_box.coordinates[0][0][0] + ", "); 
       $("#tweetResult").append(tweets.statuses[i].place.bounding_box.coordinates[0][0][1] + "<br/>"); 
       $("#tweetResult").append(tweets.statuses[i].created_at); 
      } 
      $("#tweetResult").append("<br/><br/>"); 

     } 
    }); 

    setTimeout(arguments.callee, 10000); 
})(); 

Şu anda bu i masayı

<div id="here_table"> 
<table> </table> !!!!!!!!!! 
     <tr><td>result1</td></tr> 
     <tr><td>result2</td></tr> 
     <tr><td>result3</td></tr> 
</div> 

Answer 1

Ben bazı örnek veri (her özelliğini kullanmadıysanız) ile sorunu çoğaltılmış oluşturmak için ekleme yöntemi kullandıktan sonra alıyorum çıkıştır. Ama bu size nasıl yapıldığını gösterir.

Sadece aşağıdaki pasajı çalıştırmak veya bir <table></table> eleman sıfırdan oluşturulur olarak mevcut durumun, kod düzenlenebilir bu fiddle üzerinden

var tweets = { 
 
    statuses: [{ 
 
    place: { 
 
     name: "Oostend", 
 
     country: "Belgium" 
 
    }, 
 
    user: { 
 
     profile_image_url: "https://jsfiddle.net/img/logo.png", 
 
     screen_name: "John Doe", 
 
     geo_enabled: true 
 
    }, 
 
    text: "Hello world!", 
 
    created_at: "April 7th 2016" 
 
    }, { 
 
    place: { 
 
     name: "Veurne", 
 
     country: "Belgium" 
 
    }, 
 
    user: { 
 
     profile_image_url: "https://jsfiddle.net/img/logo.png", 
 
     screen_name: "Jane Doe", 
 
     geo_enabled: false 
 
    }, 
 
    text: "Geo is disabled for me", 
 
    created_at: "April 6th 2016" 
 
    }] 
 
} 
 

 

 
$("#tweetResult").html(""); 
 
var table = $("<table></table>"); 
 
var thead = $("<thead></thead>"); 
 
thead.append($("<th></th>").html("Some header")); 
 

 
var tbody = $("<tbody></tbody>"); 
 
var geoEnabled = false; 
 
var placeName = ""; 
 
var countryName = ""; 
 
for (var i = 0; i < tweets.statuses.length; i++) { 
 
    var row = $("<tr></tr>"); 
 
    var img = $("<td><img src='" + tweets.statuses[i].user.profile_image_url + "' class='tweetpic'/><br/></td>"); 
 
    row.append(img); 
 
    row.append($("<td></td>").html(tweets.statuses[i].user.screen_name)); 
 
    row.append($("<td></td>").html(tweets.statuses[i].text + "<br/>")); 
 
    geoEnabled = tweets.statuses[i].user.geo_enabled; 
 
    if (geoEnabled) { 
 
    placeName = tweets.statuses[i].place.name; 
 
    countryName = tweets.statuses[i].place.country; 
 
    if (placeName != null) { 
 
     row.append($("<td></td>").html(placeName + ", " + countryName)); 
 
    } 
 
    //row.append($("<td></td>").html("Location: " + tweets.statuses[i].place.bounding_box.coordinates[0][0][0] + ", " + tweets.statuses[i].place.bounding_box.coordinates[0][0][1] + "<br/>")); 
 
    row.append($("<td></td>").html(tweets.statuses[i].created_at)); 
 
    } 
 
    tbody.append(row); 
 
} 
 

 
table.append(thead).append(tbody); 
 
$("#tweetResult").append(table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tweetResult"> 
 
</div>

DÜZENLEME
kontrol .