Build A List With Javascript Append

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 b

Solution 1:

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

Solution 2:

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

Html

<divid='results-holder'><tableid='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

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