dynamic table row creation in html/Javascript

Question

I have html table with 1 row to fill in job details for a position.Now If a user wants to fill in job details for another position,on clicking a link, a new row should be created dynamically each time the user clicks the link.Can any one please help me with the code in html

I'm using frontpage.

Thanks, Vix

Community · Accepted Answer · 2017-05-23 12:30:47Z

2

I would suggest looking into jQuery, the most powerful javascript framework. It is popular and you can find lots of references, resources, plugins, code etc. to help you do lots of this stuff.

Here is a stackoverflow question covering adding a table row to a table using jQuery. Add table row in jQuery

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Feb 1, 2010 at 3:40

TJB

13.5k4 gold badges38 silver badges47 bronze badges

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

Comments

tDo · Accepted Answer · 2010-02-01 03:44:03Z

1

in simple Dom-Javascript without any frameworks you could use something like this

var tr  = document.createElement('tr');

var td1 = document.createElement('td');
var someDivToAppend = document.createElement('div');
someDivToAppend.innerHTML = "Some basic text content";

td1.appendChild(someDivToAppend);
tr.appendChild(td1);
...

But I guess that's probably too much handy work, a library like jQuery could help you there. You could look at: http://api.jquery.com/append/

answered Feb 1, 2010 at 3:44

tDo

5283 silver badges5 bronze badges

2 Comments

vix Over a year ago

I have to append the following row on clicking a link.How do i do it ?? <table id="tblJob"><tr id="trjob"><td>Job Position</td><td><input type="text"id="txtName"/></td><td><input type="file" id="fupBrowse"title="Browse"/></td></tr></table>

tDo Over a year ago

Something like this in your onclick event: $("#YourTable tr:last").append('<tr><table id="tblJob"><tr id="trjob"><td>Job Position</td><td><input type="text"id="txtName"/></td><td><input type="file" id="fupBrowse"title="Browse"/></td></tr></table></tr>'); The link posted by TJB should probably help you as well

Larry K · Accepted Answer · 2010-02-01 04:31:01Z

0

Also look at the YUI Datatable. Very full featured, and well documented.

answered Feb 1, 2010 at 4:31

Larry K

49.3k15 gold badges92 silver badges148 bronze badges

Collectives™ on Stack Overflow

dynamic table row creation in html/Javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related