¿Cómo añades filas a una tabla usando jQuery?

Hola, estaba tratando de agregar una fila a una tabla usando jQuery, pero no está funcionando.
¿Cuál podría ser el motivo?¿Cómo añades filas a una tabla usando jQuery?

Y, ¿puedo agregar algún valor a la fila recién agregada?

Aquí está el código:

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $('a').click(function() { 
      $('#myTable').childs('tr').append('<tr class="child"><td>blahblah<\/td></tr>'); 
     }); 
    </script> 
    <title></title> 
</head> 
<body> 
    <a href="">Link</a> 
    <table id="myTable"> 
     <tbody> 
      <tr> 
       <td> 
        test 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

Fuente

2010-01-29 Amit

El código siguiente funciona

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function AddRow() 
{ 
    $('#myTable').append('<tr><td>test 2</td></tr>') 
} 
</script> 
<title></title> 
</head> 
<body> 
<input type="button" id="btnAdd" onclick="AddRow()"/> 
<a href="">test</a> 
<table id="myTable"> 
    <tbody > 
    <tr> 
     <td> 
     test 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Nota this will work as of jQuery 1.4 aunque la tabla incluye un elemento <tbody>: (?)

jQuery desde la versión 1.4 detecta automáticamente si el elemento que está intentando insertar (usando cualquiera de los append(), anteponga(), antes(), o después de() métodos) es <tr> y lo inserta en el primer <tbody> en su tabla o lo envuelve en un nuevo <tbody> si no existe uno.

Fuente

2010-01-29 10:17:14 Amit

y siguientes también se pueden usar var value1 = 1; $ ('# myTable'). Append ('' + value1 + '') – Amit

Debe anexar a la mesa y no las filas.

<script type="text/javascript"> 
$('a').click(function() { 
    $('#myTable').append('<tr class="child"><td>blahblah<\/td></tr>'); 
}); 
</script>

Fuente

2010-01-29 09:16:54 rsilva4

I intenté lo de arriba, pero no funcionó .. :( – Amit

bien, estás haciendo algo diferente, por favor revisa aquí (http://secretgeek.net/rtjqe/realtimejqueryeditor.htm) tu propio código con mi solución solución ion o dominic verá que funciona. – rsilva4

Estoy asumiendo que desea añadir esta fila para el elemento <tbody>, y el simple uso de append() en el <table> va a insertar el <tr> fuera del <tbody>, quizá con resultados indeseables.

$('a').click(function() { 
    $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
});

EDIT: Aquí está el código fuente completo, y que en realidad funciona:. (Nota del $(document).ready(function(){});, que no estaba presente antes

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('a').click(function() { 
     $('#myTable tbody').append('<tr class="child"><td>blahblah</td></tr>'); 
    }); 
}); 
</script> 
<title></title> 
</head> 
<body> 
<a href="javascript:void(0);">Link</a> 
<table id="myTable"> 
    <tbody> 
    <tr> 
     <td>test</td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

Fuente

2010-01-29 09:19:06

en mi experiencia, no se puede modificar el contenido html de una tabla. Intenta usar document.createElement ("tr") y document.appendElement() – mrwayne

Modifiqué tu fuente para que funcione correctamente.(Tenga en cuenta la edición anterior) No me di cuenta de esto antes, pero no tenía el '$ (document) .ready()' incluido, que básicamente lo rompe todo. A menos que espere a que se active el evento 'ready()', el DOM no está cargado y su selector jQuery probablemente no encontrará lo que está buscando. –

No olvides incluir "tbody" como se muestra en el ejemplo de la fuente. –

Probar:

$("#myTable").append("<tr><%= escape_javascript(render :partial => name_of_partial) %></tr>");

Y en el partial, usted debe tener:

<td>row1</td> 
<td>row2</td>

Fuente

2010-01-29 12:25:13

Quizás esta es la respuesta que busca. Se encuentra la última instancia de <tr /> y añade la nueva fila después de que:

<script type="text/javascript"> 
    $('a').click(function() { 
     $('#myTable tr:last').after('<tr class="child"><td>blahblah<\/td></tr>'); 
    }); 
</script>

Fuente

2013-06-28 08:59:25

siempre que utilice este código de abajo para más legible

$('table').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

o si tienen tbody

$('table').find('tbody').append([ 
'<tr>', 
    '<td>My Item 1</td>', 
    '<td>My Item 2</td>', 
    '<td>My Item 3</td>', 
    '<td>My Item 4</td>', 
'</tr>' 
].join(''));

Fuente

2017-02-06 08:41:43

¿se puede hacer esto en vainilla Js? – PirateApp

¿Cómo añades filas a una tabla usando jQuery?

Respuesta

Cuestiones relacionadas