在表中添加新行[重复]

Posted 2023-02-22

【中文标题】在表中添加新行[重复]

【英文标题】：add a new row in a table [duplicate]

【发布时间】：2012-07-17 20:06:57

【问题描述】：

可能重复：Add table row in 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>

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

提前致谢。

【问题讨论】：

如果您将thead 和tbody 部分添加到您的表格中，您可以将新行附加到tbody...另外，我刚刚意识到您正在附加一个单元格。你想追加一个单元格还是一行？

【参考方案1】：

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

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

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

【讨论】：

看起来像是附加了一行，但它只是在新行中添加了三个点“...”。我想在新行中显示我在 td 中的所有三个选择。

我提供的示例中的点只是作为空格填充符。您应该将其替换为要附加的 html。

另外请注意，HTML 元素的 ID 在整个页面中应该是唯一的。确保不要创建具有相同 id 的 html 元素

【参考方案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>');
);

【参考方案6】：

按照这个：

Customizing JQuery Cloned row attributes

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