用Javascript添加列表追加

Question

我想用一個使用追加功能的Javascript創建一個列表。

我有一個index.php文件，script.js文件和一個search.php文件，使MySQL查詢。

我知道這一切工作，但佈局不是最好的。所以我想如何讓佈局更好。

我希望它顯示爲列表，這應該用CSS或表來完成？

現在，它只是顯示了這樣414622570992222

this.number = 70992222 this.code = 4146225

所以我希望它喜歡就好什麼是沒有這樣的寄宿生名單（不邊界）。

---------------------- 
| Number | Code | 
---------------------- 
| 70992222 | 4146225 | 
---------------------- 

以下是我的script.js文件中的一些代碼。

$.each(data.results, function(){ 
         //Give the list element a rel with the data results ID incase we want to act on this later, like selecting from the list 

         $('#results-list').append("<li rel='" + this.number + "'>" + this.code + this.number + "</li>"); 

而且這是在我的index.php文件

 <div id='results-holder'> 


      <ul id='results-list'> 

Answer 1

與表

<table id='results-list'></table> 

更換您的UL標籤

然後用jquery將表標題和行添加到你的表中。關於HTML表格

$('#results-list').append("<tr><th>number</th><th>code</th></tr>"); 
$('#results-list').append("<tr><td>"+ this.number + "</td><td>" + this.code + "</td></tr>"); 

更多信息可以在這裏找到：

http://www.w3schools.com/html/html_tables.asp

Answer 2

這是爲表更好的顯示行。 這裏是表格的工作示例。 只是你想要的設計。

的Html

<div id='results-holder'> 
    <table id='results-list'> 
     <tr> 
      <th> 
       number 
      </th> 
      <th> 
       code 
      </th> 
     </tr> 
    </table> 
</div>   

的Javascript

$(document).ready(function(){ 
    $.each(data.results, function() { 
     $('#results-list').append("<tr><td rel='" + this.number + "'>" + this.code + "</td><td>" + this.number + "</td></tr>"); 
    }); 
}); 

jsFiddle

Answer 3

這應該與CSS或表來完成？

這些不是相互排斥的。 <table>是一個HTML元素，與其他元素一樣，如果它具有語義目的（即元素包含與元素代表的內容相關的數據），則應選擇該元素。然後你使用CSS來讓它看起來像你想要的樣子。

如果你有一段文字需要非常大，它仍然是一個段落，所以你把它放在一個<p>，然後你用CSS設計它看起來很大。把它放在一個<h1>元素中也會使它變大，但這個元素是用於標題的。

如果您有表格數據，例如顯示數據庫表的內容，您應該使用<table>。然後你使用CSS來隱藏邊框。

我會做這樣的事情：

$.each(data.results, function(){ 
     $('#results-list').append("<tr><td>" + this.code + "'</td><td>" + this.number + "</td></tr>"); 
}); 

，使#results-list一個<table>