jquery - horizontal - slidetoggle left

slideToggle en la fila de la tabla

Question

¿slideToggle funciona con la tabla?

Quiero diapositiva Cambiar una fila de una tabla. pero solo aparece sin ningún efecto.

Answer 1

Editar: Después de probar la respuesta de Jonatan, su método parece bastante más limpio.

Aquí tengo una fila de tabla con los view-converters clase que, al hacer clic, mostrarán / ocultarán todos los divs con la clase TCConverters .

Mis filas se ven así:

<tr><td><div class="TCConverters"><input type="button" value="b1"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b2"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b3"></div></td></tr>
<tr><td><div class="TCConverters"><input type="button" value="b4"></div></td></tr>

Aquí está el código que se ejecuta al hacer clic en view-converters .

No hice nada especial con el relleno de las celdas de la mesa.

Tenga en cuenta que ocultamos la fila de la tabla cuando terminamos de animar la diapositiva.

$(".view-converters").click(function() {
if(!$(".TCConverters:first").is(":visible")) {
$(".TCConverters").parent().parent().show();
}
$(".TCConverters").slideToggle(200,function() {
if(!$(this).is(":visible")) {
$(this).parent().parent().hide();
}
});
});

Se parece a esto:

Original:

Aquí tengo una fila de la tabla con los view-converters clase que, al hacer clic, mostrarán / ocultarán todas las filas con la clase TCConverters :

Puede ajustar la velocidad cambiando el valor inicial de hacky y el incremento en cada .each .

Esto no estirar las filas tan bien como una diapositiva alternar, pero el efecto funcionó para mis propósitos.

Si realmente desea exprimir la altura de la fila, puede simplemente animarlo usted mismo reemplazando param.hide() con un setTimeout que reduce la altura hasta que llega a 0.

$(".view-converters").click(function() {
var hacky = 50;
if($(''.TCConverters:first'').is('':visible'')) {
$(''.TCConverters'').each(function() {
var param = $(this);
setTimeout(function() { param.hide(); },hacky);
hacky += 5;
});
}
else {
$($(''.TCConverters'').get().reverse()).each(function() {
var param = $(this);
setTimeout(function() { param.show(); },hacky);
hacky += 5;
});
}
});

Se parece a esto:

Answer 2

Encontré un poco de solución al problema de no poder deslizar las filas de la tabla. Este código solo funciona si el contenido de su tabla es completamente de texto. Esto podría ajustarse para admitir otras cosas (imágenes, etc.) con algo de trabajo. La idea es que la fila solo se contraiga hasta que alcance el tamaño de su contenido. Por lo tanto, si puede reducir el contenido cuando sea necesario, la diapositiva continuará.

http://jsfiddle.net/BU28E/622/

$("button").click(function(){
$(''#1'').slideUp({
duration: 1500,
step: function(){
var $this = $(this);
var fontSize = parseInt($this.css("font-size"), 10);
// if the real and css heights differ, decrease the font size until they match
while(!sameHeight(this) && fontSize > 0){
$this.css("font-size", --fontSize);
}
}
});
});
function sameHeight(el){
var cssHeight = el.style.height;
cssHeight = parseFloat(cssHeight.substring(0,cssHeight.length-2));
var realHeight = $(el).innerHeight();
return isNaN(cssHeight) || realHeight - cssHeight < 2;
}

El efecto es ligeramente diferente, ya que el contenido se reduce en comparación con el efecto de desplazamiento normal.

Es posible que los < 2 en la última línea deban ajustarse según sus fronteras (y posiblemente otros factores). Además, esto solo demuestra ocultar el contenido. Se necesitaría un enfoque similar para permitir que el tamaño de la fuente crezca a medida que la fila se desliza hacia abajo. Esto es más una prueba de concepto.

Answer 3

Intenta usar

$("#tr").fadeToggle(1000)

para un efecto similar

Answer 4

Lo que hago es poner un solo DIV en la fila y establecer el relleno del TR y TD a cero. Entonces puedo deslizar-alternar el div en lugar de la fila:

<table>
<tr style="padding: 0">
<td style="padding: 0">
<div id="slideme" style="display: none">
</td>
</tr>
</table>
$("#slideme").slideToggle();

Funciona genial. Creo que podrías poner un DIV en cada columna y deslizarlos, alternarlos simultáneamente si lo necesitas.

Answer 5

No sé si esta solución alternativa es considerada y eficiente, pero funcionó para mí:

di que quieres deslizar hacia arriba la primera fila de una tabla (este código deslizará hacia arriba el encabezado):

$(''table tr'').first().children().slideUp();

entonces, básicamente, te gustaría deslizar hacia arriba los hijos de Row en lugar de la fila en sí :)

Answer 6

Puede deslizar el alternar de una fila en la tabla. Por favor, intente esto

El código Html de una tabla:

<a href="#" >ok</a>
<table id="tbl">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
<tr><td>6</td><td>5</td></tr>
</table>

El código jQuery está aquí al hacer clic en "a" href, la tabla se cambiará.

$(document).ready(function() {
$("a").click(function() {
$(''table tr td'').slideToggle("medium");
});
});

Para una fila de índice particular, puede usar $(''table tr:eq(rowindex) td'') .

Answer 7

Puede hacer esto configurando el tr que desea deslizar para display:none; luego, dentro de ese tr agregue un td con colspan iguale la cantidad de columnas que tiene su tabla con un div que también se configura como display:none dentro de ese td .

Todo el contenido que desee en la fila deslizante entra en el div mencionado anteriormente, lo que da como resultado un tr que se desliza con animación.

El siguiente fragmento muestra esto en acción.

$(".accordion-row").on("click",
function() {
var accordionRow = $(this).next(".accordion");
if (!accordionRow.is(":visible")) {
accordionRow.show().find(".accordion-content").slideDown();
} else {
accordionRow.find(".accordion-content").slideUp(function() {
if (!$(this).is('':visible'')) {
accordionRow.hide();
}
});
}
});

.accordion-row {
cursor: pointer;
}
.accordion {
display: none;
width: 100%;
}
.accordion-content {
display: none;
}
/* Only used to remove undeeded padding added by bootstrap */
table.table.table-hover>tbody>tr>td {
padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th>
th1
</th>
<th>
th2
</th>
<th>
th3
</th>
</tr>
</thead>
<tbody>
<tr class="accordion-row">
<td>
tr1 td1
</td>
<td>
tr1 td2
</td>
<td>
tr1 td3
</td>
</tr>
<tr class="accordion">
<td colspan="3">
<div class="accordion-content">
tr1 accordion-content
</div>
</td>
</tr>
<tr class="accordion-row">
<td>
tr2 td1
</td>
<td>
tr2 td2
</td>
<td>
tr2 td3
</td>
</tr>
<tr class=" accordion">
<td colspan="3">
<div class="accordion-content">
tr2 accordion-content
</div>
</td>
</tr>
</tbody>
</table>

Answer 8

SlideToggle funciona con filas de tablas, simplemente apesta.

Si tiene una fila de tabla con una altura mayor que su mínimo, como esta

<tr height="30%">

Luego slidetoggle hará un deslizamiento suave hacia abajo hasta que llegue a su altura mínima ... luego desaparecerá de inmediato como lo usaste

$("#tr").hide();

Hice una jsfiddle demostrando esto en http://jsfiddle.net/BU28E/1/

Una mejor solución para usted puede ser usar una tabla hecha de divs. Divs se deslizará muy suavemente. Hice otro jsfiddle demostrando esto en http://jsfiddle.net/BU28E/2/