javascript - build a list with Javascript append

Question

I want to build a list with a Javascript that uses Append function.

I have a index.php file, script.js file and a search.php file that makes the mysql query.

I got it all to work but the layout is not the best. So i wounder how to make the layout better.

I want it to be displayed as a list this should be done with CSS or table?

Right now it just shows up like this 414622570992222

this.number=70992222 this.code=4146225

So what i want it to like like is a list without boarders like this (but no borders).

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

Here is some code from my script.js file.

$.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>");

And this is the display line in my index.php file

        <div id='results-holder'>


            <ul id='results-list'>

Answer 1

It's better as table. here is working example with tables. just design it as you want.

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 2

replace your ul tag with a table

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

then append table headings and rows to your table with 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>");

more info about html tables can be found here:

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

Answer 3

this should be done with CSS or table?

These are not mutually exclusive. <table> is an HTML element, which like other elements you should choose if it has semantic purpose, i.e. if the element contains data that pertains to what the element stands for. Then you use CSS to make it look the way you want to.

If you have a paragraph of text that needs to be very huge, it's still a paragraph, so you put it in a <p> and then you style it with CSS to look big. Putting it in a <h1> element would also make it big, but that element is for titles.

If you have tabular data, like showing the contents of a database table you should use a <table>. Then you use CSS to hide the borders.

I'd do something like this:

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

And make the #results-list a <table>