Question

this is my html code:

<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>

this is my script:

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);
}

After this is done, in the real ouput this happens:

So:

1) All the info is higher than table headers (<th> tag)

2) All the info isn’t in the column, but just smashed together

3) None of the info is showed in HTML source.

What must I change to make it look as it should?

Feel free to ask any questions.

Answer 1

Just remove your <div id="info"></div> and append directly to the table.

$('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);

Code: http://jsfiddle.net/Xdbqs/5/