Question

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

我无法让它发挥作用。我在这里遗失了什么可以让任何人让我知道我的错误在哪里？

提前致谢。

Answer 1

你提到追加Row但是在你的代码中你只附加了单元格。

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

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

Answer 2

这一行：

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

将TD（<td>...</td>）附加到现有的TD（td:last）;你想把它附加到TR，例如

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

当然，您提到要添加新的行，在这种情况下，您根本不应添加<td>，您应该附加<tr> （显然，你应该把它附在桌子上）。

Answer 3

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

Answer 4

如果您想添加新行，则必须添加tr

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

Answer 5

您应该使用after代替，append会将元素附加到tr内。

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

Answer 6

遵循：

Customizing JQuery Cloned row attributes

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

在表中添加新行

6 个答案: