javascript - 在表格中添加新行

Question

可能重复：
在 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>

我无法让它工作。我在这里遗漏了一些东西，谁能告诉我我的错误在哪里？

提前致谢。

score 10 · Accepted Answer

您提到附加行，但在您的代码中，您只附加了单元格。

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

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

score 6 · Accepted Answer

这一行：

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

将 TD ( ) 附加<td>...</td>到现有的 TD ( td:last) 上；您想将其附加到 TR，例如。

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

当然，您提到要添加一个新的row，在这种情况下，您根本不应该附加 a ，而<td>应该附加 a <tr>（显然，您应该将其附加到表中）。

score 3 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

您应该after改用，append将元素附加到tr.

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

score 0 · Accepted Answer

按照这个：

自定义 JQuery 克隆行属性

它可以让您克隆、附加然后自定义每个单元格.. 非常灵活。

javascript - 在表格中添加新行

6 回答 6

Related

Reference