2011-09-23 38 views
0

這是我的html代碼:添加的行和列與jQuery/JavaScript以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); 
} 

此步驟完成後,在實際輸出中出現這種情況:

enter image description here

所以:

1)所有的信息比表頭(<th>標籤)

2)所有的信息是不是列較高,但只是一起搗爛

3)的無信息顯示在HTML源代碼中。

我必須改變以使其看起來應該如何?

隨時問任何問題。

+0

在這樣的表格中間不能有div;附加到表格中。它不會在HTML源代碼中,因爲它不在HTML源代碼中 - 您需要檢查元素以獲取DOM。 –

回答

5

只需刪除<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/

1

你不能把一個div在表中。試試這個:

<table id="datatable"> 
<tr> 
    <th>id</th> 
    <th>city_id</th> 
    <th>temp</th> 
    <th>date</th> 
</tr> 
</table> 

function(data) { 
     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>";     
     } 
     $('#datatable').append(html); 
} 
0
<table id="info"> 
    <tr> 
     <th>id</th> 
     <th>city_id</th> 
     <th>temp</th> 
     <th>date</th> 
    </tr> 
</table> 

如前所述這是您的標記。將其更改爲上述內容。

0

不要使用div。你可以使用一個和你的代碼將工作。