CODEWITHSUNDEEP
jquery
BeginnertoUI
BeginnertoUI

Reputation: 82

Dynamically adding rows to table through jquery

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...

Upvotes: 0

Views: 81

Answers (1)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 1

Related Questions