añadir una nueva fila en una tabla

Question

Duplicar posible:
Add table row in jQuery

Quiero añadir una nueva fila a mi mesa en un evento de cambio. Aquí es lo que tengo hasta ahora:

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

aquí es mi mesa:

<%@ 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> 

no soy capaz de conseguir que esto funcione. Me falta algo aquí ¿alguien me puede decir dónde está mi error?

Gracias de antemano.

Answer 1

Menciona Anexar Fila pero en su código está agregando solo celdas.

Si es necesario añadir en realidad una fila completa, intente esto:

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

Answer 2

Esta línea:

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

añade un TD (<td>...</td>) a un TD existente (td:last); quieres agregarlo a un TR, ej.

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

Por supuesto, usted ha mencionado que quieren añadir una nueva fila , en cuyo caso no deberías estar añadiendo un <td> en absoluto, usted debe estar añadiendo un <tr> (y se debe adjuntar a la mesa , obviamente).

Answer 3

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

Answer 4

Si desea agregar una nueva fila que hay que añadir un tr

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

Answer 5

Debe utilizar after vez , append agregará el elemento dentro del tr.

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

Answer 6

siguen esta:

Customizing JQuery Cloned row attributes

Se permite clonar, añadir y luego personalizar cada célula .. muy flexible.