div - settext p jquery

¿Se puede expandir y cerrar una fila de la tabla?

Question

¿Es posible hacer que una fila de la tabla se expanda y colapse? ¿Alguien puede referirme a un guión o un ejemplo? Prefiero jQuery si es posible. Tengo un concepto de dibujo que me gustaría lograr:

Answer 1

Bueno, yo diría que usar el DIV en lugar de la tabla, ya que sería mucho más fácil (pero no hay nada de malo en usar tablas).

Mi enfoque sería usar jQuery.ajax y solicitar más datos al servidor y de esa manera, el DIV seleccionado (o TD si usa la tabla) se expandirá automáticamente según el contenido solicitado.

De esa manera, ahorra ancho de banda y lo hace más rápido ya que no carga todo el contenido a la vez. Se carga solo cuando se selecciona.

Answer 2

Depende de su marcado, pero ciertamente puede hacerse funcionar, usé lo siguiente:

jQuery

$(document).ready(
function() {
$(''td p'').slideUp();
$(''td h2'').click(
function(){
$(this).siblings(''p'').slideToggle();
}
);
}
);

html

 <table>
<thead>
<tr>
<th>Actor</th>
<th>Which Doctor</th>
<th>Significant companion</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>William Hartnell</h2></td>
<td><h2>First</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
<td><h2>Susan Foreman</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
</tr>
<tr>
<td><h2>Patrick Troughton</h2></td>
<td><h2>Second</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
<td><h2>Jamie MacCrimmon</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
</tr>
<tr>
<td><h2>Jon Pertwee</h2></td>
<td><h2>Third</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></td>
<td><h2>Jo Grant</h2><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></td>
</tr>
</tbody>
</table>

La forma en que lo slideUp() es contraer elementos específicos dentro de las celdas de la fila, de modo que, en mi caso, la fila se slideUp() ya que los párrafos estaban ocultos, y aún así deja un elemento, h2 para hacer clic para re -Mostrar el contenido. Si la fila se colapsara por completo, no habría una manera obvia de devolverla.

Demo en JS Bin

Como @Peter Ajtai señaló, en los comentarios, el enfoque anterior se enfoca en una sola celda (aunque deliberadamente). Para expandir todos los elementos hijo p esto funcionaría:

$(document).ready(
function() {
$(''td p'').slideUp();
$(''td h2'').click(
function(){
$(this).closest(''tr'').find(''p'').slideToggle();
}
);
}
);

Demo en JS Bin

Answer 3

Para responder a su pregunta, no. Eso sería posible con div sin embargo. La única pregunta es que causaría un problema si la funcionalidad se hiciera con div en lugar de tablas.

Answer 4

Podrías hacerlo así:

HTML

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td><a href="#" id="show_1">Show Extra</a></td>
</tr>
<tr>
<td colspan="5">
<div id="extra_1" style="display: none;">
<br>hidden row
<br>hidden row
<br>hidden row
</div>
</td>
</tr>
</table>

jQuery

$("a[id^=show_]").click(function(event) {
$("#extra_" + $(this).attr(''id'').substr(5)).slideToggle("slow");
event.preventDefault();
});

Vea una demostración en JSFiddle

Espero que esto ayude !

Answer 5

Sí, una fila de la tabla puede deslizarse hacia arriba y hacia abajo, pero es fea, ya que cambia la forma de la tabla y hace que todo salte. En su lugar, ponga un elemento en cada td ... algo que tenga sentido como p o h2 etc.

Para saber cómo implementar una tabla de diapositivas alternar ...

Probablemente sea más sencillo colocar el controlador de clic en toda la tabla, .stopPropagation() y verificar en qué se hizo clic .

Si se hace clic en una td en una fila con un colspan, cierre la p en ella. Si no es un td en una fila con un colspan, entonces cierre y luego alterne la p la fila siguiente.

Esencialmente, es para envolver todo su contenido escrito en un elemento dentro de los td s, ya que nunca querrá slideUp un td o tr o la forma de la tabla cambiará.

Algo como:

$(function() {
// Initially hide toggleable content
$("td[colspan=3]").find("p").hide();
// Click handler on entire table
$("table").click(function(event) {
// No bubbling up
event.stopPropagation();
var $target = $(event.target);
// Open and close the appropriate thing
if ( $target.closest("td").attr("colspan") > 1 ) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});​

Pruébalo con este ejemplo jsFiddle.

... y pruebe este jsFiddle que muestra la implementación de un conmutador + - - .

El HTML solo debe tener filas alternas de varios td sy luego una fila con un td de colspan mayor que 1. Obviamente, puede ajustar los detalles con bastante facilidad.

El HTML se vería algo así como:

<table>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
</td></tr>
<tr><td><p>Name</p></td><td><p>Age</p></td><td><p>Info</p></td></tr>
<tr><td colspan="3"><p>Blah blah blah blah blah blah blah.</p>
</td></tr>
</table>​

Answer 6

jQuery

$(function() {
$("td[colspan=3]").find("div").hide();
$("tr").click(function(event) {
var $target = $(event.target);
$target.closest("tr").next().find("div").slideToggle();
});
});

HTML

<table>
<thead>
<tr>
<th>one</th><th>two</th><th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td><p>data<p></td><td>data</td><td>data</td>
</tr>
<tr>
<td colspan="3">
<div>
<table>
<tr>
<td>data</td><td>data</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

Esto es muy parecido a un ejemplo anterior de arriba. Descubrí que al intentar implementar ese ejemplo, si se hacía clic en la fila de la tabla a expandir mientras no estaba expandida, desaparecería y ya no sería expandible

Para solucionarlo, simplemente eliminé la capacidad de hacer clic en el elemento expandible para deslizar hacia arriba y lo hice para que solo pueda alternar usando la fila de la tabla anterior.

También hice algunos cambios menores en html y jQuery correspondiente.

NOTA: Habría hecho un comentario, pero aún no se me ha permitido hacerlo por mucho tiempo. Solo quería publicar esto, ya que me tomó un poco averiguar lo que estaba sucediendo con la fila de la mesa que desaparecía.

¡Espero que esto ayude a alguien!

crédito a Peter Ajtai