在表中添加一个新行

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

你提到追加行，但在你的代码中你只追加单元格。

如果您需要实际追加一个整行，试试这个：

$('#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

它可以让你克隆，追加然后自定义每个单元..非常灵活。