How to populate html table using javascript without using div?

Question

I am trying to fill html table(my table got 3 columns) with data from json using javascript but the data never get filled using div method! could any tell me how to fill content of table rows using without using div ?

 for(i in json)
    {


    var div = "<tr id=\""+i+"\">\n" +
    "<td>"+i+"</td>\n" +
    "<td><img src=\""+ json[i].thumb +"\" height=\"42\" width=\"42\"></td>\n" +
    "<td>\n" +
    "<a href=\"javascript:callfunction('Name=" + json[i].title + "','" + json[i].sources + "','"+ json[i].thumb +"')\" onclick=\"selectLink(this);\">" + json[i].title + "</a><br> \n" +
    "<br></td></tr>\n\n";

    $("#myDiv").append(div);

        }

Table to be filled:

   <table id="list" cellspacing="0" border="1">

    <tr>
    <th>Item#</th>
    <th>Logo</th>
    <th>Description</th>

    </tr>


    <div id='myDiv'></div>


    </table>

num8er · Accepted Answer · 2016-10-06 00:19:28Z

3

This Your new table:

<table id="list" cellspacing="0" border="1">
  <thead>
    <tr>
      <th>Item#</th>
      <th>Logo</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

And code:

var html = '';

for(var i in json)
{
    html += '<tr id="'+i+'">'; 
    html += '<td>'+i+'</td>'; 
    html += '<td><img src="'+json[i].thumb+'" height="42" width="42"></td>';
    html += "<td>";
    html += "<a href=\"javascript:callfunction('Name=" + json[i].title + "','" + json[i].sources + "','"+ json[i].thumb +"')\" onclick=\"selectLink(this);\">" + json[i].title + "</a><br/><br/>"; 
    html += '</td>';
    html += '</tr>';
}

$('#list > tbody').html(html);

edited Oct 6, 2016 at 0:19

answered Oct 6, 2016 at 0:14

num8er

19.5k4 gold badges50 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1788736 Over a year ago

Thanks for the code . it worked well . May i know tables made this way can be searchable via javascript code ?

num8er Over a year ago

Yes, it does not matter, what's inserted as html() is also part of DOM, so jquery will work with it without issue.

Collectives™ on Stack Overflow

How to populate html table using javascript without using div?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related