Dynamically adding rows to table through jquery

Question

I am trying to append new rows to table on click of a button. while doing so, my new row created is wrapping to the first column of previously existing row.

here is the link from fiddle :

http://jsfiddle.net/z4cz4xgc/

$(".addEntry").on("click",function()
            {
                    $("#momTable").append('<tr class="newRow"><td style="width:20px;"><input type="radio" class="editRowInput" name="editRow"></td> <td>2</td><td><input type="text" class="activityInput active" name="activity" value=""></td><td><input type="text" class="ownerInput active" name="activity" value=""></td><td><input type="text" class="projectNameInput active" name="projectName" value=""></td><td><input type="text" class="regionInput active" name="region" value=""></td><td><input type="text" class="startDateInput active" name="startDate" value=""></td><td><input type="text" class="targetDateInput active" name="targetDate" value=""></td><td><input type="text" class="closureDateInput active" name="closureDate" value=""></td><td><span class="hide">Open</span>   <select name="status" class="showstatusInput"><option value="Open">Open</option><option value="In Progress">In Progress</option><option value="Closed">Closed</option></select></td><td><textarea rows="5" cols="26" class="commentsInput" name="comments" text-align="top"></textarea></td></tr>');
                    console.log(newRow);
            });

can someone please take a look ?

Thanks in advance...

It's very common problem, use the below SO answer. Similar problem explained in detail. stackoverflow.com/questions/19092894/… — Pratik
– Pratik, Commented Oct 28, 2014 at 11:43
Using after works, good. The question why append won't work. — dfsq
– dfsq, Commented Oct 28, 2014 at 11:44

Bhushan Kawadkar · Accepted Answer · 2014-10-28 11:49:50Z

1

You have used below css classes that are making mess in your code

.newRow{display:none;}
#momTable .newRow{display:block;}

remove above css and your code will work as it is.

JSFiddle Demo

NOTE - Your header row has wrong html

<tr>
                    <td style="width:20px;">Edit</th>
                    <th>SlNo</th>..

first column tag starts with td, correct it to th

answered Oct 28, 2014 at 11:49

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

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

1 Comment

BeginnertoUI Over a year ago

thanks a ton Bhusan .. now i see error in my css and i fixed it and its working perfectly fine...

Collectives™ on Stack Overflow

Dynamically adding rows to table through jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related