目前,我正在尝试使用jQuery绘制一个表,但它不起作用。这是当前的js代码。我尝试使用append,但它对表没有用。有人可以帮我这个。谢谢。
(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);
})();
目前这是我使用append方法创建表
后得到的输出<div id="here_table">
<table> </table> !!!!!!!!!!
<tr><td>result1</td></tr>
<tr><td>result2</td></tr>
<tr><td>result3</td></tr>
</div>
答案 0 :(得分:0)
我用一些示例数据复制了这个问题(没有使用每个属性)。但是,这将向您展示它是如何完成的。
只需运行下面的代码段或查看此fiddle
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);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tweetResult">
</div>
&#13;
修改强>
我根据您当前的情况编辑了代码,其中从头开始创建<table></table>
元素。