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