Adding <tr> <td> within a div with Javascript not showing within the table

Question

I have a HTML table as below :

 <table> <tr> <th>Name</th> <th>Class</th> <th>Reg ID</th> </tr> <tr> <td>Alex</td> <td>VII</td> <td>56733</td> </tr> <div id="addfield"></div> </table> <input type="button" value="add" id="add_more_fields" />

And the jquery :

$(document).ready(function(){ var html = ''; $('#add_more_fields').click(function(){ html += '<tr>'; html += '<td>Steve</td>'; html += '<td>X</td>'; html += '<td>87777</td>'; html += '</tr>'; $('#addfield').append(html); }); });

I wanted to add the <tr> generated by the javascript to be within the table. but when I clicked the button, the output is shown outside the table ! How can I display it within the table ?

DEMO Here

i think you need to give the id to Table instead of Div [Updated Fiddle] (jsfiddle.net/2yBYb/1) — Ravi
– Ravi, Commented Jan 9, 2014 at 6:02

codingrose · Accepted Answer · 2014-01-09 06:03:31Z

It is not working because div inside table is invalid HTML structure. Append row to the table itself.

Also, you are not clearing the string html. Which causes multiple rows.

$('#add_more_fields').click(function () { var html = ''; //declare string inside function html += '<tr>'; html += '<td>Steve</td>'; html += '<td>X</td>'; html += '<td>87777</td>'; html += '</tr>'; $('table').append(html); });

Updated fiddle here.

Rohan Kumar · Accepted Answer · 2014-01-09 06:08:30Z

Try tbody inplace of #addfield like,

<table> <thead> <tr> <th>Name</th> <th>Class</th> <th>Reg ID</th> </tr> </thead> <tbody> <tr> <td>Alex</td> <td>VII</td> <td>56733</td> </tr> </tbody> </table>

SCRIPT

$('#add_more_fields').click(function(){ html += '<tr>'; html += '<td>Steve</td>'; html += '<td>X</td>'; html += '<td>87777</td>'; html += '</tr>'; $('tbody').append(html); });

Demo

Sridhar R · Accepted Answer · 2014-01-09 06:12:12Z

Append Inside table

$('#add_more_fields').on('click',function(){ html += '<tr>'; html += '<td>Steve</td>'; html += '<td>X</td>'; html += '<td>87777</td>'; html += '</tr>'; $('table').append(html);//If you have more table then use id for table to append });

welbornio · Accepted Answer · 2014-01-09 06:03:44Z

You can't have a div inside a table. All you've gotta do is put the id on the table and remove the div.

<table id='addfield'>

Collectives™ on Stack Overflow

Adding <tr> <td> within a div with Javascript not showing within the table

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related