用 Javascript append 建立一个列表答案

【问题标题】：build a list with Javascript append用 Javascript append 建立一个列表
【发布时间】：2013-10-12 18:08:34
【问题描述】：

我想用一个使用 Append 函数的 Javascript 来构建一个列表。

我有一个 index.php 文件、一个 script.js 文件和一个用于进行 mysql 查询的 search.php 文件。

我得到了一切工作，但布局不是最好的。所以我很清楚如何使布局更好。

我希望它显示为一个列表，这应该用 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'>

【问题讨论】：

我会使用表格来存储表格数据。

标签： javascript php jquery css

【解决方案1】：

这应该用 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>

【讨论】：

谢谢！修复了它并找到了一些用于表格布局的 CSS 生成器。非常感谢！

【解决方案2】：

用表格替换你的 ul 标记

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

然后使用 jquery 将表格标题和行附加到您的表格中。

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

更多关于 html 表格的信息可以在这里找到：

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

【讨论】：

谢谢！修复了它并找到了一些用于表格布局的 CSS 生成器。非常感谢！

【解决方案3】：

作为桌子更好。这是表格的工作示例。随心所欲地设计。

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

【讨论】：