使用jQuery绘制表格

匿名5671

目前,我正在尝试使用jQuery绘制表格,但无法正常工作。这是当前的js代码。我尝试使用附加,但不适用于该表。有人可以帮我这个忙吗?谢谢你。

    (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>
约雷克斯

我用一些示例数据(没有使用每个属性)复制了该问题。但这将向您展示它是如何完成的。

只要运行下面的代码片段或查看捣鼓

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>

编辑
我将代码编辑为您当前的情况,即<table></table>从头开始创建一个元素。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档