Comment utiliser la fonction slideDown (ou show) sur une rangée de tableaux?
j'essaie d'ajouter une ligne à une table et de faire glisser cette ligne dans la vue, mais la fonction slidedown semble ajouter un affichage:block style à la ligne de la table qui gâche la mise en page.
des idées pour contourner ça?
voici le code:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
21 réponses
ne sont pas supportées sur les lignes de tableaux.
à Partir de "l'Apprentissage de jQuery" par Chaffer et Swedberg
les lignes du tableau présentent les particularités suivantes: obstacles à l'animation, depuis les navigateurs utilisez des valeurs différentes (tableau-ligne et bloc) pour leur affichage visible propriété. Le. hide() et .montrer() méthodes, sans animation, sont toujours utilisation sûre avec les rangées de tableaux. Comme d' jQuery version 1.1.3,.fadeIn() et .fadeOut() peut être utilisée aussi bien.
vous pouvez envelopper votre contenu td dans un div et utiliser le slideDown dessus. Vous devez décider si l'animation vaut le supplément.
j'enroule simplement le tr dynamiquement puis je l'enlève une fois que le slideUp/slideDown a terminé. C'est un assez petit overhead qui ajoute et enlève un ou deux tags puis les enlève une fois l'animation terminée, je ne vois pas de décalage visible du tout le faisant.
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();
});
SlideDown:
$('#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());
});
je dois rendre hommage à fletchzone.com comme j'ai pris son plugin et l'ai dépouillé de nouveau à la ci-dessus, santé mon pote.
voici un plug-in que j'ai écrit pour cela, il prend un peu de Fletch mise en œuvre, mais le mien est utilisé uniquement pour faire glisser une rangée vers le haut ou vers le bas (pas d'insertion de rangées).
(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).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).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).find('td');
$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);
Usage De Base:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
Passer à la diapositive options individuelles arguments:
$('#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
essentiellement, pour l'animation slide down, le plug-in enveloppe le contenu des cellules en DIVs, Anime ceux-ci, puis les supprime, et vice versa pour la glissade vers le haut (avec quelques étapes supplémentaires pour se débarrasser du rembourrage de la cellule). Il renvoie aussi l'objet sur lequel vous l'Avez Appelé, de sorte que vous pouvez enchaîner les méthodes comme suit:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
J'espère que ça aidera quelqu'un.
vous pourriez essayer d'envelopper le contenu de la rangée dans un <span> et avoir votre sélecteur soit $('#detailed_edit_row span'); - un peu hackish, mais je viens de le tester et il fonctionne. J'ai aussi essayé la suggestion table-row ci-dessus et ça n'a pas semblé marcher.
update : j'ai joué avec ce problème, et de toutes les indications jQuery a besoin de l'objet qu'il exécute slideDown sur pour être un élément de bloc. Donc, pas de dés. J'ai pu faire apparaître une table où j'ai utilisé slideDown sur une cellule et il n'a pas affecté la disposition du tout, donc je ne suis pas sûr de la façon dont le vôtre est mis en place. Je pense que votre seule solution est de reformuler la table de manière à ce que ce soit ok avec cette cellule étant un bloc, ou juste .show(); la chose maudite. Bonne chance.
je suis un peu en retard sur la réponse à cela, mais j'ai trouvé un moyen de le faire :)
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);
}
}
je viens de mettre un élément div à l'intérieur des balises de données de la table. quand il est placé visible, comme la div se développe, toute la rangée descend. ensuite, dites-lui de revenir en arrière (puis timeout de sorte que vous voyez l'effet) avant de cacher la ligne de table à nouveau :)
Espérons que cela aide quelqu'un!
sélectionnez le contenu de la ligne comme suit:
$(row).contents().slideDown();
.sommaire() - Obtenez les enfants de chaque élément dans l'ensemble des éléments appariés, y compris les noeuds de texte et de commentaire.
je suis un débutant dans cette communauté. Pl, note ma réponse. :)
Vous pouvez trouver celui-ci fonctionne très bien.
Im ayant une table ( <table style='display: none;'></table> )
dans le contenu <tr class='dummyRow' style='display: none;'><td></td></tr> .
pour glisser dans la rangée..
$('.dummyRow').show().find("table").slideDown();
Note: la ligne et le contenu à l'intérieur de la ligne (ici c'est table ) doivent tous deux être cachés avant le début de l'animation.
pour glisser vers le haut de la rangée..
$('.dummyRow').find("table").slideUp('normal', function(){$('.dummyRow').hide();});
second paramètre(function) est un callback.
de Simples!!
j'ai contourné cela en utilisant les éléments td dans la rangée:
$(ui.item).children("td").effect("highlight", { color: "#4ca456" }, 1000);
animer la rangée elle-même provoque des comportements étranges, surtout des problèmes d'animation asynchrone.
pour le code ci-dessus, je souligne une ligne qui est traînée et laissée tomber dans la table pour souligner que la mise à jour a réussi. Espérons que cela aide quelqu'un.
je veux faire glisser tout le corps et j'ai géré ce problème en combinant les effets de fondu et de glissement.
j'ai fait cela en 3 étapes (les 2e et 3e étapes sont remplacées au cas où vous voulez glisser vers le bas ou vers le haut)
- l'Attribution de la hauteur à tbody,
- Afficher tous les td et th,
- corps coulissant.
Exemple de slideUp:
tbody.css('height', tbody.css('height'));
tbody.find('td, th').fadeOut(200, function(){
tbody.slideUp(300)
});
j'ai eu des problèmes avec toutes les autres solutions proposées mais j'ai fini par faire cette chose simple qui est lisse comme du beurre.
configurez votre HTML comme suit:
<tr id=row1 style='height:0px'><td>
<div id=div1 style='display:none'>
Hidden row content goes here
</div>
</td></tr>
puis configurer votre javascript comme suit:
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";
}
}
En Gros, faites la rangée" invisible " 0px haute, avec un div à l'intérieur.
Utilisez l'animation sur le div (pas la rangée) et ensuite réglez la hauteur de la rangée à 1px.
pour masquer à nouveau la rangée, utilisez l'animation opposée sur la div et réglez la hauteur de la rangée de nouveau à 0px.
j'ai aimé le plugin que Vinny a écrit et utilisé. Mais dans le cas des tables à l'intérieur de la ligne de glissement (tr/td), les lignes de la table emboîtée sont toujours cachées même après avoir glissé vers le haut. Donc j'ai fait un hack rapide et simple dans le plugin pour ne pas cacher les rangées de table emboîtée. Il suffit de changer la ligne suivante
var $cells = $(this).find('td');
à
var $cells = $(this).find('> td');
qui ne trouve que des MDT immédiates pas imbriquées. Espérons que cela aide quelqu'un utilisant le plugin et ont imbriqué table.
je voudrais ajouter un commentaire à l'article de #Vinny mais ne pas avoir le rep ont donc à poster une réponse...
a trouvé un bug avec votre plugin - quand vous passez juste un objet avec des arguments, ils sont écrasés si aucun autre argument n'est passé. Facilement résolu en changeant l'ordre dans lequel les arguments sont traités, code ci-dessous. J'ai aussi ajouté une option pour détruire la rangée après la fermeture (seulement comme j'en avais besoin!): $('#row_id').slideRow ('up', true); // détruit le ligne
(function ($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false,
destroyAfterUp: false
},
methods: {
up: function (arg1, arg2, arg3) {
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;
}
if (typeof arg1 == 'object') {
for (p in arg1) {
sR.thisCallArgs[p] = arg1[p];
}
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
} else if (typeof arg1 != 'undefined' && (typeof arg1 == 'boolean')) {
sR.thisCallArgs.destroyAfterUp = arg1;
} else {
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
var $row = $(this);
var $cells = $row.children('th, td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing).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 (sR.thisCallArgs.destroyAfterUp)
{
$row.replaceWith('');
}
if (typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1, arg2, arg3) {
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;
}
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;
}
var $cells = $(this).children('th, td');
$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);
j'ai utilisé les idées fournies ici et j'ai rencontré quelques problèmes. Je les ai tous réparés et j'ai une doublure lisse que j'aimerais partager.
$('#row_to_slideup').find('> td').css({'height':'0px'}).wrapInner('<div style=\"display:block;\" />').parent().find('td > div').slideUp('slow', function() {$(this).parent().parent().remove();});
il utilise css sur l'élément td. Il réduit la hauteur à 0px. De cette façon, seule la hauteur du contenu du div-wrapper nouvellement créé à l'intérieur de chaque élément td compte.
l'alignement est lent. Si tu ralentis, tu pourrais te rendre compte d'un bug. Un petit saut au début. C'est en raison du réglage CSS mentionné. Mais sans ces réglages, la rangée ne diminuerait pas en hauteur. Seulement son contenu.
à la fin, l'élément tr est supprimé.
toute la ligne ne contient que JQuery et aucun Javascript natif.
J'espère que ça aidera.
a créé une table avec des lignes cachées qui glissent dans et hors de la vue sur le clic de ligne.
$('.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;
}<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="wrapper">
<table cellspacing="0" cellpadding="3">
<thead>
<tr class="table">
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
</tr>
</thead>
<tbody>
<tr class="tr-show-sub">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class="tr-sub">
<td colspan="5"><div class="div-sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
</div></td>
</tr>
<tr class="tr-show-sub">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
<tr class="tr-sub">
<td colspan="5"><div class="div-sub">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem.
</div></td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
</tr>
</tbody>
</table>
</div>si vous devez glisser et faner une rangée de table en même temps, essayez de les utiliser:
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');
});
});
});
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());
});
}
vous pouvez utiliser ces méthodes comme:
jQuery("[data-toggle-tr-trigger]").click(function() {
var $tr = jQuery(this).parents(trClass).nextUntil(trClass);
if($tr.is(':hidden')) {
showTr($tr);
} else {
hideTr($tr);
}
});
j'ai peut être fait si vous définissez la td est dans la ligne pour afficher aucun dans le même temps, vous commencez à l'animation de la hauteur sur la ligne
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;
}
}
ce code fonctionne!
<!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>
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();
}
});
});
la prise offerte par Vinny est vraiment proche, mais j'ai trouvé et corrigé quelques petits problèmes.
- il visait avidement les éléments td au-delà des enfants de la rangée étant cachés. Cela aurait été ok si il avait alors cherché ces enfants lors de l'affichage de la ligne. Pendant que c'était proche, ils ont tous fini avec "display: none" sur eux, les rendant cachés.
- il n'a pas visé l'enfant th éléments à tous.
-
pour les cellules de table avec beaucoup de contenu (comme une table emboîtée avec beaucoup de lignes), en appelant slideRow ('up'), quelle que soit la valeur de l'espace fourni, il s'effondrerait la vue de la ligne dès que l'animation de rembourrage a été fait. Je l'ai corrigé pour que l'animation de rembourrage ne se déclenche pas jusqu'à ce que la méthode slideUp() sur l'enrubannage soit terminée.
(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);
Fixation Rapide/Facile:
Utiliser JQuery .bascule () pour afficher/cacher les lignes d'un clic de ligne ou D'une ancre.
Une fonction devra être écrite pour identifier les lignes que vous souhaitez caché, mais bascule crée la fonctionnalité que vous recherchez.