Добавить новую строку в таблицу - программирование
Подтвердить что ты не робот

Добавить новую строку в таблицу

Возможный дубликат:
Добавить строку таблицы в jQuery

Я хочу добавить новую строку в свою таблицу в событие изменения. Вот что я до сих пор:

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

Вот моя таблица:

<%@ 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>

Я не могу заставить это работать. Мне не хватает чего-то здесь, кто-нибудь может сообщить мне, где моя ошибка?

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

Вы упомянули append Row, но в вашем коде вы добавляете только ячейки.

Если вам действительно нужно добавить полную строку, попробуйте следующее:

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

Ответ 2

Эта строка:

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

добавляет TD (<td>...</td>) к существующему TD (td:last); вы хотите добавить его в TR, например.

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

Конечно, вы упомянули о желании добавить новую строку, и в этом случае вам не следует добавлять <td> вообще, вы должны добавить <tr> (и вы должны добавить его в таблицу, очевидно).

Ответ 3

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

Ответ 4

Если вы хотите добавить новую строку, вы должны добавить tr

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

Ответ 5

Вместо этого вы должны использовать after, append добавит элемент внутри tr.

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