jquery - tbody - llenar tabla html con javascript
¿Cómo agregar filas a una tabla usando jQuery? (7)
Hola, estaba intentando agregar una fila a una tabla usando jQuery, pero no está funcionando.
¿Cuál podría ser la razón?
Y, ¿puedo ponerle algo de 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>
Debes adjuntar a la tabla y no a las filas.
<script type="text/javascript">
$(''a'').click(function() {
$(''#myTable'').append(''<tr class="child"><td>blahblah<//td></tr>'');
});
</script>
El siguiente código 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>
Tenga en cuenta que esto funcionará a partir de jQuery 1.4 incluso si 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 métodos append (), prepend (), before () o after ()) es un
<tr>y lo inserta en el primero<tbody>en su tabla o envuélvalo en un nuevo<tbody>si no existe uno.
Siempre uso este código a continuación 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 tiene 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(''''));
Supongo que desea agregar esta fila al elemento <tbody> , y simplemente al usar append() en la <table> se insertará la <tr> fuera del <tbody> , con resultados quizás no deseables.
$(''a'').click(function() {
$(''#myTable tbody'').append(''<tr class="child"><td>blahblah</td></tr>'');
});
EDITAR: Aquí está el código fuente completo, y de hecho funciona: (Note el $(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>
Tal vez esta es la respuesta que estás buscando. Encuentra la última instancia de <tr /> y agrega la nueva fila después de ella:
<script type="text/javascript">
$(''a'').click(function() {
$(''#myTable tr:last'').after(''<tr class="child"><td>blahblah<//td></tr>'');
});
</script>
Tratar:
$("#myTable").append("<tr><%= escape_javascript( render :partial => name_of_partial ) %></tr>");
Y en el partial , deberías tener:
<td>row1</td>
<td>row2</td>
Probado y trabajando
Para agregar como primera fila en la tabla
$(".table tbody").append("<tr><td>New row</td></tr>");
Para agregar como última fila en la tabla
$(".table tbody").prepend("<tr><td>New row</td></tr>");