0

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

BeginnertoUI
  • 82
  • 2
  • 11
  • well on my console its showing that new row is not defined – Dev Man Oct 28 '14 at 11:39
  • oops i missed to remove that, you can ignore the error :) – BeginnertoUI Oct 28 '14 at 11:41
  • It's very common problem, use the below SO answer. Similar problem explained in detail. http://stackoverflow.com/questions/19092894/adding-new-rows-to-table-on-clicking-button-in-jquery – Pratik Oct 28 '14 at 11:43
  • Using `after` works, good. The question why append won't work. – dfsq Oct 28 '14 at 11:44
  • @MohitArora So why don't you answer this question? – dfsq Oct 28 '14 at 11:48
  • Hi Mohit, can you please help me understand what changes you made ? – BeginnertoUI Oct 28 '14 at 11:50
  • @MohitArora Phhh, this is a good question, why not answer it. – dfsq Oct 28 '14 at 11:50
  • @BeginnertoUI The problem is in your styles. The class `newRow` new `tr` has makes it `display: block`, which is problematic in this case, because `tr` must have `display: table-row`. Hence it breaks the table layout. – dfsq Oct 28 '14 at 11:52
  • @MohitArora It's not reputation. It's explanation of the problem. So far there are 3 answers and not a one *explaining* the problem. – dfsq Oct 28 '14 at 11:56

1 Answers1

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

Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57