add a new row in a table

Question

Possible Duplicate:
Add table row in jQuery

I want to add a new row to my table on a change event. Here is what I have so far:

$('#CourseID').change(function() {
    $('#CourseListTable > tr > td:last').append('<td>...</td>');
});

Here is my table:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>    
<table id="CourseListTable">
    <tr>
        <th>Course ID</th>
        <th>Course Section</th>
        <th>Level</th>            
    </tr>
    <tr>
        <td><select name="CourseID" id="CourseID"></select></td>
        <td><select name="CourseSection" id="CourseSection"></select></td>
        <td><select name="Level" id="Level"></select></td>            
    </tr>
</table>

I am not able to get this to work. I am missing something over here can anyone let me know where my error lies?

Thanks in advance.

If you add `thead` and `tbody` sections to your table, you could just append the new row to the tbody... Also, I just realized you are appending a cell. Did you want to append a cell or a row? — MrOBrian, Jul 18 '12 at 17:49

score 10 · Accepted Answer · answered Jul 18 '12 at 17:51

10

You mention append Row but in your code you are appending just cells.

If you need to actually append a full row, try this:

$('#CourseID').change(function() {
    $('<tr/>').append('<td>...</td>').insertAfter('#CourseListTable tr:last');
});

answered Jul 18 '12 at 17:51

Chandu

81,493
19
133
134

Looks like its appending a row, but it just adds three dots '...' to the new row. I want to display all the three selects I have in the td in the new row. – user793468 Jul 18 '12 at 17:56
The dots in the example I have provided are just as space fillers. You should replace that with the HTML you want to append. – Chandu Jul 18 '12 at 17:56
1

Also on note, the ID for a HTML element shuold be unique across the page. Make sure you don't create html elements with same id – Chandu Jul 18 '12 at 17:57

machineghost · Answer 2 · 2012-07-18T17:54:07.940

6

This line:

$('#CourseListTable > tr > td:last').append('<td>...</td>');

appends a TD (<td>...</td>) to an existing TD (td:last); you want to append it to a TR, eg.

$('#CourseListTable > tr').append('<td>...</td>');

Of course, you mentioned wanting to add a new row, in which case you shouldn't be appending a <td> at all, you should be appending a <tr> (and you should append it to the table, obviously).

edited Jul 18 '12 at 17:54

answered Jul 18 '12 at 17:47

machineghost

33,529
30
159
234

score 3 · Answer 3 · answered Jul 18 '12 at 17:48

3

$('#CourseID').change(function() {
    $('#CourseListTable > tbody > tr:eq(1)').append('<td>...</td>');
});

answered Jul 18 '12 at 17:48

thecodeparadox

86,271
21
138
164

score 0 · Answer 4 · answered Jul 18 '12 at 17:51

0

If you want to add a new row you have to add a tr

$('#CourseListTable tr:last').after('<tr><td>...</td><td>...</td><td>...</td></tr>');

answered Jul 18 '12 at 17:51

Musa

96,336
17
118
137

score 0 · Answer 5 · answered Jul 18 '12 at 17:52

0

You should use after instead, append will append the element inside the tr.

$('#CourseID').change(function() {
    $('#CourseListTable tr:last').after('<tr><td>test</td><td>test</td><td>test</td></tr>');
});

answered Jul 18 '12 at 17:52

Sang Suantak

5,213
1
27
46

score 0 · Answer 6 · edited May 23 '17 at 12:34

0

follow this:

Customizing JQuery Cloned row attributes

It lets you clone, append and then customize each cell.. very flexible.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 18 '12 at 18:03

srini.venigalla

5,137
1
18
29

add a new row in a table

6 Answers6