• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Contributor ,
Nov 01, 2015 Nov 01, 2015

Copy link to clipboard

Copied

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>

Views

430

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 02, 2015 Nov 02, 2015

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>

Votes

Translate

Translate
LEGEND ,
Nov 02, 2015 Nov 02, 2015

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 06, 2015 Nov 06, 2015

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Nov 06, 2015 Nov 06, 2015

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines