使用jQuery绘制表格

Use jQuery to draw table

本文关键字：表格 绘制 jQuery 使用      更新时间：2024-02-24

目前，我正在尝试使用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>

我用一些示例数据复制了这个问题（没有使用每个属性）。但这将向你展示它是如何做到的。

只需运行下面的代码片段或查看这个小提琴

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>元素是从头开始创建的。

相关文章：