jquery - left - slidetoggle is not a function

¿Cómo usar la función slideDown(o show) en una fila de la tabla? (21)

Estoy tratando de agregar una fila a una tabla y hacer que esa fila se deslice a la vista, sin embargo, la función de deslizamiento parece estar agregando una pantalla: estilo de bloque a la fila de la tabla que desordena el diseño.

¿Alguna idea de cómo trabajar alrededor de esto?

Aquí está el código:

$.get(''/some_url'', { ''val1'': id }, function (data) { var row = $(''#detailed_edit_row''); row.hide(); row.html(data); row.slideDown(1000); } );

¡Este código funciona!

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title></title> <script> function addRow() { $(''.displaynone'').show(); $(''.displaynone td'') .wrapInner(''<div class="innerDiv" style="height:0" />''); $(''div'').animate({"height":"20px"}); } </script> <style> .mycolumn{border: 1px solid black;} .displaynone{display: none;} </style> </head> <body> <table align="center" width="50%"> <tr> <td class="mycolumn">Row 1</td> </tr> <tr> <td class="mycolumn">Row 2</td> </tr> <tr class="displaynone"> <td class="mycolumn">Row 3</td> </tr> <tr> <td class="mycolumn">Row 4</td> </tr> </table> <br> <button onclick="addRow();">add</button> </body> </html>

Aquí hay un complemento que escribí para esto, toma un poco de la implementación de Fletch, pero el mío se usa únicamente para deslizar una fila hacia arriba o hacia abajo (sin filas de inserción).

Uso básico:

$(''#row_id'').slideRow(''down''); $(''#row_id'').slideRow(''up'');

Pasa las opciones de diapositiva como argumentos individuales:

$(''#row_id'').slideRow(''down'', 500); //slide speed $(''#row_id'').slideRow(''down'', 500, function() { alert(''Row available''); }); // slide speed and callback function $(''#row_id'').slideRow(''down'', 500, ''linear'', function() { alert(''Row available''); }); slide speed, easing option and callback function $(''#row_id'').slideRow(''down'', {slideSpeed: 500, easing: ''linear'', callback: function() { alert(''Row available'');} }); //options passed as object

Básicamente, para la animación deslizar hacia abajo, el complemento envuelve el contenido de las celdas en DIV, las anima, luego las quita y viceversa para la diapositiva hacia arriba (con algunos pasos adicionales para deshacerse del relleno de la celda). También devuelve el objeto en el que lo llamaste, por lo que puedes encadenar métodos así:

$(''#row_id'').slideRow(''down'').css({''font-color'':''#F00''}); //make the text in the row red

Espero que esto ayude a alguien.

El tapón ofrecido por Vinny está realmente cerca, pero encontré y solucioné un par de pequeños problemas.

Apuntó con avidez a los elementos td más allá de los hijos de la fila que se ocultan. Esto habría estado bien si hubiera buscado a esos niños al mostrar la fila. Mientras se acercaba, todos terminaron con "display: none" en ellos, ocultándolos.
No apuntaba a los elementos del niño en absoluto.
Para celdas de tablas con mucho contenido (como una tabla anidada con muchas filas), llamando a slideRow (''arriba''), independientemente del valor de slideSpeed proporcionado, colapsaría la vista de la fila tan pronto como se completara la animación de relleno. . Lo arreglé para que la animación de relleno no se dispare hasta que se complete el método slideUp () en el ajuste.
(function($){ var sR = { defaults: { slideSpeed: 400 , easing: false , callback: false } , thisCallArgs:{ slideSpeed: 400 , easing: false , callback: false } , methods:{ up: function(arg1, arg2, arg3){ if(typeof arg1 == ''object''){ for(p in arg1){ sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != ''undefined'' && (typeof arg1 == ''number'' || arg1 == ''slow'' || arg1 == ''fast'')){ sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == ''string''){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == ''function''){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == ''undefined''){ sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == ''function''){ sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == ''undefined'' && typeof arg2 != ''function''){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).children(''td, th''); $cells.wrapInner(''<div class="slideRowUp" />''); var currentPadding = $cells.css(''padding''); $cellContentWrappers = $(this).find(''.slideRowUp''); $cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function(){ $(this).parent().animate({ paddingTop: ''0px'', paddingBottom: ''0px'' }, { complete: function(){ $(this).children(''.slideRowUp'').replaceWith($(this).children(''.slideRowUp'').contents()); $(this).parent().css({ ''display'': ''none'' }); $(this).css({ ''padding'': currentPadding }); } }); }); var wait = setInterval(function(){ if($cellContentWrappers.is('':animated'') === false){ clearInterval(wait); if(typeof sR.thisCallArgs.callback == ''function''){ sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } , down: function (arg1, arg2, arg3){ if(typeof arg1 == ''object''){ for(p in arg1){ sR.thisCallArgs.eval(p) = arg1[p]; } }else if(typeof arg1 != ''undefined'' && (typeof arg1 == ''number'' || arg1 == ''slow'' || arg1 == ''fast'')){ sR.thisCallArgs.slideSpeed = arg1; }else{ sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed; } if(typeof arg2 == ''string''){ sR.thisCallArgs.easing = arg2; }else if(typeof arg2 == ''function''){ sR.thisCallArgs.callback = arg2; }else if(typeof arg2 == ''undefined''){ sR.thisCallArgs.easing = sR.defaults.easing; } if(typeof arg3 == ''function''){ sR.thisCallArgs.callback = arg3; }else if(typeof arg3 == ''undefined'' && typeof arg2 != ''function''){ sR.thisCallArgs.callback = sR.defaults.callback; } var $cells = $(this).children(''td, th''); $cells.wrapInner(''<div class="slideRowDown" style="display:none;" />''); $cellContentWrappers = $cells.find(''.slideRowDown''); $(this).show(); $cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); }); var wait = setInterval(function(){ if($cellContentWrappers.is('':animated'') === false){ clearInterval(wait); if(typeof sR.thisCallArgs.callback == ''function''){ sR.thisCallArgs.callback.call(this); } } }, 100); return $(this); } } }; $.fn.slideRow = function(method, arg1, arg2, arg3){ if(typeof method != ''undefined''){ if(sR.methods[method]){ return sR.methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } } }; })(jQuery);

Estoy un poco atrasado en responder a esto, pero encontré una manera de hacerlo :)

function eventinfo(id) { tr = document.getElementById("ei"+id); div = document.getElementById("d"+id); if (tr.style.display == "none") { tr.style.display="table-row"; $(div).slideDown(''fast''); } else { $(div).slideUp(''fast''); setTimeout(function(){tr.style.display="none";}, 200); } }

Acabo de poner un elemento div dentro de las etiquetas de datos de la tabla. cuando se establece visible, a medida que el div se expande, toda la fila se reduce. luego dígale que desaparezca (luego, espere para que vea el efecto) antes de volver a ocultar la fila de la tabla :)

¡Espero que esto ayude a alguien!

He solucionado esto usando los elementos td en la fila:

$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);

Animar la propia fila causa un comportamiento extraño, principalmente problemas de animación asíncronos.

Para el código anterior, estoy resaltando una fila que se arrastra y suelta en la tabla para resaltar que la actualización ha tenido éxito. Espero que esto ayude a alguien.

Las animaciones no son compatibles con las filas de la tabla.

De "Learning jQuery" por Chaffer y Swedberg

Las filas de la tabla presentan obstáculos particulares para la animación, ya que los navegadores usan diferentes valores (tabla-fila y bloque) para su propiedad de visualización visible. Los métodos .hide () y .show (), sin animación, son siempre seguros para usar con filas de tablas. A partir de la versión 1.1.3 de jQuery, también se pueden usar .fadeIn () y .fadeOut ().

Puedes envolver tus contenidos td en un div y usar el slideDown en eso. Debes decidir si la animación vale el margen adicional.

Me gustó el plugin que Vinny ha escrito y ha estado usando. Pero en el caso de tablas dentro de la fila deslizante (tr / td), las filas de la tabla anidada siempre se ocultan incluso después de deslizarse hacia arriba. Así que hice un truco rápido y sencillo en el complemento para no ocultar las filas de la tabla anidada. Solo cambia la siguiente linea

var $cells = $(this).find(''td'');

var $cells = $(this).find(''> td'');

el cual encuentra solo tds inmediatos no anidados. Espero que esto ayude a alguien a usar el plugin y tenga tablas anidadas.

Me gustaría agregar un comentario a la publicación de # Vinny, pero no tengo el representante, así que tengo que publicar una respuesta ...

Encontró un error con su complemento: cuando simplemente pasa un objeto con argumentos, estos se sobrescriben si no se pasan otros argumentos. Se resuelve fácilmente cambiando el orden en que se procesan los argumentos, código a continuación. También agregué una opción para destruir la fila después del cierre (¡solo porque la necesitaba!): $ (''# Row_id''). SlideRow (''up'', true); // destruye la fila

Nedé una tabla con filas ocultas que se deslizan dentro y fuera de la vista al hacer clic en la fila.

$(''.tr-show-sub'').click(function(e) { var elOne = $(this); $(''.tr-show-sub'').each(function(key, value) { var elTwoe = $(this); if(elOne.get(0) !== elTwoe.get(0)) { if($(this).next(''.tr-sub'').hasClass(''tr-sub-shown'')) { elTwoe.next(''.tr-sub'').removeClass(''tr-sub-shown''); elTwoe.next(''tr'').find(''td'').find(''div'').slideUp(); elTwoe.next(''tr'').find(''td'').slideUp(); } } if(elOne.get(0) === elTwoe.get(0)) { if(elOne.next(''.tr-sub'').hasClass(''tr-sub-shown'')) { elOne.next(''.tr-sub'').removeClass(''tr-sub-shown''); elOne.next(''tr'').find(''td'').find(''div'').slideUp(); elOne.next(''tr'').find(''td'').slideUp(); } else { elOne.next(''.tr-sub'').addClass(''tr-sub-shown''); elOne.next(''tr'').find(''td'').slideDown(); elOne.next(''tr'').find(''td'').find(''div'').slideDown(); } } }) });

body { background: #eee; } .wrapper { margin: auto; width: 50%; padding: 10px; margin-top: 10%; } table { background: white; width: 100%; } table th { background: gray; text-align: left; } table th, td { border-bottom: 1px solid lightgray; padding: 5px; } table .tr-show-sub { background: #EAEAEA; cursor: pointer; } table .tr-sub td { display: none; } table .tr-sub td .div-sub { display: none; }

Puede intentar envolver el contenido de la fila en un <span> y hacer que su selector sea $(''#detailed_edit_row span''); - Un poco pirateado, pero acabo de probarlo y funciona. También probé la sugerencia de la table-row la table-row anterior y no pareció funcionar.

actualización : he estado jugando con este problema, y de todas las indicaciones, jQuery necesita que el objeto en el que realiza el slideDown sea un elemento de bloque. Entonces, no hay dados. Pude evocar una mesa en la que usé slideDown en una celda y no afectó en absoluto al diseño, así que no estoy seguro de cómo está configurada la suya. Creo que tu única solución es refactorizar la tabla de tal manera que esté bien con esa celda como un bloque, o simplemente .show(); la maldita cosa Buena suerte.

Quiero deslizar todo el cuerpo y he manejado este problema mediante la combinación de efectos de diapositivas y fundido.

Lo he hecho en 3 etapas (los pasos 2 y 3 se reemplazan en caso de que quieras deslizar hacia abajo o hacia arriba)

Asignando altura a tbody,
Desvaneciendo todo td y th,
Tbody deslizante.

Ejemplo de slideUp:

tbody.css(''height'', tbody.css(''height'')); tbody.find(''td, th'').fadeOut(200, function(){ tbody.slideUp(300) });

Se puede hacer si configura los td en la fila para mostrar ninguno al mismo tiempo que comienza a animar la altura en la fila.

tbody tr{ min-height: 50px; } tbody tr.ng-hide td{ display: none; } tr.hide-line{ -moz-transition: .4s linear all; -o-transition: .4s linear all; -webkit-transition: .4s linear all; transition: .4s linear all; height: 50px; overflow: hidden; &.ng-hide { //angularJs specific height: 0; min-height: 0; } }

Selecciona el contenido de la fila así:

$(row).contents().slideDown();

.contents() : .contents() de cada elemento en el conjunto de elementos coincidentes, incluidos los nodos de texto y comentarios.

Si necesita deslizar y desvanecer una fila de la tabla al mismo tiempo, intente usar estos:

jQuery.fn.prepareTableRowForSliding = function() { $tr = this; $tr.children(''td'').wrapInner(''<div style="display: none;" />''); return $tr; }; jQuery.fn.slideFadeTableRow = function(speed, easing, callback) { $tr = this; if ($tr.is('':hidden'')) { $tr.show().find(''td > div'').animate({opacity: ''toggle'', height: ''toggle''}, speed, easing, callback); } else { $tr.find(''td > div'').animate({opacity: ''toggle'', height: ''toggle''}, speed, easing, function(){ $tr.hide(); callback(); }); } return $tr; }; $(document).ready(function(){ $(''tr.special'').hide().prepareTableRowForSliding(); $(''a.toggle'').toggle(function(){ $button = $(this); $tr = $button.closest(''tr.special''); //this will be specific to your situation $tr.slideFadeTableRow(300, ''swing'', function(){ $button.text(''Hide table row''); }); }, function(){ $button = $(this); $tr = $button.closest(''tr.special''); //this will be specific to your situation $tr.slideFadeTableRow(300, ''swing'', function(){ $button.text(''Display table row''); }); }); });

Simplemente envuelvo el tr dinámicamente y luego lo quito una vez que el slideUp / slideDown se ha completado. Es una sobrecarga bastante pequeña agregar y quitar una o un par de etiquetas y luego eliminarlas una vez que se completa la animación, no veo ningún retraso visible al hacerlo.

SlideUp :

$(''#my_table > tbody > tr.my_row'') .find(''td'') .wrapInner(''<div style="display: block;" />'') .parent() .find(''td > div'') .slideUp(700, function(){ $(this).parent().parent().remove(); });

Bajar deslizándose:

$(''#my_table > tbody > tr.my_row'') .find(''td'') .wrapInner(''<div style="display: none;" />'') .parent() .find(''td > div'') .slideDown(700, function(){ var $set = $(this); $set.replaceWith($set.contents()); });

Tengo que rendir homenaje a fletchzone.com ya que tomé su plugin y lo devolví a lo anterior, saludos compañero.

Solución rápida / fácil:

Use JQuery .toggle() para mostrar / ocultar las filas en el clic de una fila o un ancla.

Deberá escribirse una función para identificar las filas que desea ocultar, pero la alternancia crea la funcionalidad que está buscando.

Soy un novato en esta comunidad. Califico mi respuesta. :)

Usted puede encontrar que este funciona bien.

Tengo una tabla ( <table style=''display: none;''></table> )

dentro del contenido de <tr class=''dummyRow'' style=''display: none;''><td></td></tr> .

Para deslizarse por la fila ..

$(''.dummyRow'').show().find("table").slideDown();

Nota: la fila y el contenido dentro de la fila (aquí está la table ) deben estar ocultos antes de que comience la animación.

Para deslizar hacia arriba la fila ..

$(''.dummyRow'').find("table").slideUp(''normal'', function(){$(''.dummyRow'').hide();});

El segundo parámetro (función) es una devolución de llamada.

¡¡Sencillo!!

Tuve problemas con todas las otras soluciones ofrecidas pero terminé haciendo esta cosa simple que es tan suave como la mantequilla.

Configura tu HTML así:

<tr id=row1 style=''height:0px''><td> <div id=div1 style=''display:none''> Hidden row content goes here </div> </td></tr>

Luego configura tu javascript como tal:

function toggleRow(rowid){ var row = document.getElementById("row" + rowid) if(row.style.height == "0px"){ $(''#div'' + rowid).slideDown(''fast''); row.style.height = "1px"; }else{ $(''#div'' + rowid).slideUp(''fast''); row.style.height = "0px"; } }

Básicamente, haga la fila "invisible" de 0px de altura, con un div dentro.
Use la animación en el div (no la fila) y luego establezca la altura de la fila a 1px.

Para volver a ocultar la fila, use la animación opuesta en el div y ajuste la altura de la fila a 0px.

Utilicé las ideas proporcionadas aquí y enfrenté algunos problemas. Los arreglé todos y tengo una sola línea que me gustaría compartir.

$(''#row_to_slideup'').find(''> td'').css({''height'':''0px''}).wrapInner(''<div style=/"display:block;/" />'').parent().find(''td > div'').slideUp(''slow'', function() {$(this).parent().parent().remove();});

Utiliza css en el elemento td. Reduce la altura a 0px. De esa manera, solo importa la altura del contenido del envoltorio div recién creado dentro de cada elemento td.

El slideUp es lento. Si lo haces aún más lento podrías darte cuenta de algunos fallos. Un pequeño salto al principio. Esto es debido a la configuración css mencionada. Pero sin esos ajustes, la fila no disminuiría en altura. Solo su contenido lo haría.

Al final se elimina el elemento tr.

La línea completa solo contiene JQuery y ningún Javascript nativo.

Espero eso ayude.

http://jsfiddle.net/PvwfK/136/

<table cellspacing=''0'' cellpadding=''0'' class=''table01'' id=''form_table'' style=''width:100%;''> <tr> <td style=''cursor:pointer; width:20%; text-align:left;'' id=''header''> <label style=''cursor:pointer;''> <b id=''header01''>▲ Customer Details</b> </label> </td> </tr> <tr> <td style=''widtd:20%; text-align:left;''> <div id=''content'' class=''content01''> <table cellspacing=''0'' cellpadding=''0'' id=''form_table''> <tr> <td>A/C ID</td> <td>:</td> <td>3000/A01</td> </tr> <tr> <td>A/C ID</td> <td>:</td> <td>3000/A01</td> </tr> <tr> <td>A/C ID</td> <td>:</td> <td>3000/A01</td> </tr> </table> </div> </td> </tr>

$(function () { $(".table01 td").on("click", function () { var $rows = $(''.content01''); if ($(".content01:first").is(":hidden")) { $("#header01").text("▲ Customer Details"); $(".content01:first").slideDown(); } else { $("#header01").text("▼ Customer Details"); $(".content01:first").slideUp(); } });

});

function hideTr(tr) { tr.find(''td'').wrapInner(''<div style="display: block;" />'').parent().find(''td > div'').slideUp(50, function () { tr.hide(); var $set = jQuery(this); $set.replaceWith($set.contents()); }); } function showTr(tr) { tr.show() tr.find(''td'').wrapInner(''<div style="display: none;" />'').parent().find(''td > div'').slideDown(50, function() { var $set = jQuery(this); $set.replaceWith($set.contents()); }); }

Puedes usar estos métodos como:

jQuery("[data-toggle-tr-trigger]").click(function() { var $tr = jQuery(this).parents(trClass).nextUntil(trClass); if($tr.is('':hidden'')) { showTr($tr); } else { hideTr($tr); } });