Trying to display jQuery output to simulate a table - need help

[revdave]

Hi all,

using javascript to query database that brings back a result of ten or 20 results. I am trying to simulate a table layout for the result but it's not working well. The rows display - but not inside the table as listed below and ends up posting the date ABOVE the table headers - not after the headers...

I would like to get this working if possible

Any Idea how to set this up so It functions like an html table correctly?

Thanks in advance - DAVE

$.each(data, function(key, value) {

console. log ('item', key, value);

output += "<tr>" +

"<td width='75'>" + value.First + "</td>" +

"<td width='150'>" + value.Last + "</td>" +

"<td width='25'>" + value.phone + "</td>" +

"<td width='25'>" + value.email + "</td>" +

+ "</tr>";

  });    

            $('#list').html( output );

            $('#list').listview( "refresh" );

});

<!-- then... table  -->

<table  border="1" cellspacing="2" cellpadding="2">

<!-- table header -->

<tr>

<th width='75'>first</td>

<th width='150'>Last</td>

<th width='25'>phone</td>

<th width='25'>email</td>

</tr>

<!-- hoping this would create the inner rows - but end up above the table header rows -->

<div id="list" data-role="listview"></div>

</table>

[David_Powers · Accepted solution]

You can't just dump a div into a table like that. Change the div to tbody.

<table  border="1" cellspacing="2" cellpadding="2">

<!-- table header -->

<thead>

<tr>

<th width='75'>first</td>

<th width='150'>Last</td>

<th width='25'>phone</td>

<th width='25'>email</td>

</tr>

</thead>

<tbody id="list" data-role="listview"></tbody>

</table>

[revdave]

AHA - great - I'm trying it now - Thanks David

[revdave]

WOW DAVID - I just tried it, and it worked GREAT!

Just a note: as a newbie - some things can take a long time to figure out - soooo glad this was explained so well and worked right away - much appreciated!