javascript - 使用 jQuery/JavaScript 将行和列添加到 HTML

Question

这是我的 html 代码:

<h3>Ilm selles linnas</h3>
<table>
    <tr>
        <th>id</th>
        <th>city_id</th>
        <th>temp</th>
        <th>date</th>
    </tr>
    <div id="info"></div>
</table>

这是我的脚本:

function(data) {
            $('#info').empty();
            var html = "";
            for(var i = 0; i < data.length; i++) {
                html += "<tr>"+
                    "<td>"+data[i].id+"</td>"+
                    "<td>"+data[i].city_id+"</td>"+
                    "<td>"+data[i].temperature+"</td>"+
                    "<td>"+data[i].date+"</td>"+
                "</tr>";                
            }
            $('#info').append(html);
}

完成此操作后，在实际输出中会发生以下情况:

所以:

1) 所有信息均高于表格标题( <th> 标签)

2) 所有信息都不在列中，而是拼凑在一起

3) HTML 源代码中没有显示任何信息。

我必须改变什么才能使它看起来像它应该的那样？

如有任何问题，请随时提出。

Answer 1

只需删除您的 <div id="info"></div>并直接追加到表格中。

$('table tr:gt(0)').remove();

var html = "";
$(data).each(function() {
    html += "<tr>"+
                "<td>"+this.id+"</td>"+
                "<td>"+this.city_id+"</td>"+
                "<td>"+this.temperature+"</td>"+
                "<td>"+this.date+"</td>"+
            "</tr>";    
});   

$('table').append(html);

代码:http://jsfiddle.net/Xdbqs/5/