Javascript 在表中添加新行

可能重复：

我想在更改事件中将新行添加到表中。以下是我到目前为止的情况：

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

$（'#CourseID'）。更改（函数（）{
$（“#CourseListTable>tr>td:last”）.append（“…”）；
});

这是我的桌子：

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

课程ID
课程组
水平仪

我没办法让它工作。我遗漏了一些东西，有人能告诉我我的错误在哪里吗

提前感谢。

此行：

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

当然，您提到要添加一个新行，在这种情况下，您根本不应该追加一个

，您应该追加一个

（显然，您应该将它追加到表中）。

$（'#CourseID'）.change（function（）{
$（“#CourseListTable>tbody>tr:eq（1）”.append（“…”）；
});

您提到了追加行，但在代码中您只是追加单元格

如果需要实际追加整行，请尝试以下操作：

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

$（'#CourseID'）。更改（函数（）{
$（“”）.append（“…”）.insertAfter（“#课程列表tr:last”）；
});

如果要添加新行，必须添加

tr

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

$（'CourseListTable tr:last'）。在（'……'）之后；

您应该在

之后使用
，
append
将在
tr
中追加元素

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

$（'#CourseID'）。更改（函数（）{
$（'CourseListTable tr:last'）。在（'testtest'）之后；
});
遵循以下步骤：


它允许您克隆、附加并自定义每个单元格。。非常灵活。
如果您在表中添加
thead
和
tbody
部分，您可以将新行附加到tbody。。。另外，我刚刚意识到你在附加一个单元格。是否要追加单元格或行？看起来是追加行，但它只是在新行上添加了三个点“…”。我想在新的一行中显示td中的所有三个选择。我提供的示例中的点只是作为空格填充。您应该将其替换为要附加的HTML。另外需要注意的是，HTML元素的ID在整个页面中是唯一的。确保不创建具有相同id的html元素
$('#CourseListTable tr:last').after('<tr><td>...</td><td>...</td><td>...</td></tr>');

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