在表格中添加新行

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>

我无法让这个工作起来。我在这里漏掉了些东西，有人能告诉我我的错误在哪里吗？

提前感谢。

- user793468

---

如果为您的表格添加 thead 和 tbody 部分，您只需要将新行附加到 tbody 中...另外，我刚刚意识到您正在附加单元格。您想要附加的是单元格还是整行？ - MrOBrian

Answer 1

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

如果您需要实际添加一整行，请尝试以下代码：

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

- Chandu

---

看起来它正在追加一行，但实际上只是在新行中添加了三个点'...'。我想在新行中显示我在td中有的所有三个选择。 - user793468

我提供的示例中的点只是占位符。您应该将其替换为要附加的HTML。 - Chandu

另外需要注意的是，HTML元素的ID应在整个页面上唯一。请确保不要创建具有相同ID的HTML元素。 - Chandu

Answer 2

这行代码：

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

将一个 TD (<td>...</td>) 添加到现有的 TD (td:last)；你需要将其添加到 TR 中，例如。

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

当然，你提到了想要添加一个新的“行”，那么你不应该追加<td>，而是应该追加<tr>（当然，你需要将其追加到表中）。

- machineghost

Answer 3

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

- thecodeparadox

Answer 4

如果您想添加新行，您需要添加一个 tr。

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

- Musa

Answer 5

你应该使用 after，而不是 append，append 会将元素添加到 tr 内部。

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

- Sang Suantak

Answer 6

请按照以下步骤：

自定义JQuery克隆行属性

它允许您克隆、追加，然后自定义每个单元格...非常灵活。

- srini.venigalla