Une ligne de tableau peut-elle se développer et se fermer?
Est-il possible de développer et de réduire une ligne de tableau? Quelqu'un peut-il me référer à un script ou à un exemple? Je préfère jQuery si possible. J'ai un concept de dessin que j'aimerais réaliser:
Oui, une ligne de tableau peut glisser de haut en bas, mais c'est moche, car cela change la forme du tableau et fait tout sauter. Au lieu de cela, placez et élément dans chaque td... quelque chose qui a du sens comme un p ou h2 Etc.
Pour savoir comment implémenter une bascule de diapositive de table ...
Il est probablement plus simple de placer le gestionnaire de clics sur toute la table, .stopPropagation() et vérifier ce qui a été cliqué.
Si un td dans une ligne avec un colspan est cliqué, fermez le p dedans. Si ce n'est pas un td dans une ligne avec un colspan, fermez puis basculez le p de la ligne suivante.
Il s'agit essentiellement d'envelopper tout votre contenu écrit dans un élément à l'intérieur des tds, car vous ne voulez jamais slideUp a td ou tr ou la forme du tableau changera!
Quelque chose comme:
$(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();
}
});
});
Essayez-le avec cet exemple jsFiddle.
... et essayez ce jsFiddle montrant l'implémentation d'une bascule + - -.
Le HTML doit simplement avoir des lignes alternées de plusieurs tds puis une ligne avec un td d'un colspan supérieur à 1. Vous pouvez évidemment ajuster les spécificités assez facilement.
Le HTML ressemblerait à quelque chose comme:
<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>
Vous pouvez le faire comme ceci:
[~ # ~] 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();
});
Voir une démo sur JSFiddle
J'espère que cela t'aides !
Cela dépend de votre marge bénéficiaire, mais cela peut certainement fonctionner, j'ai utilisé ce qui suit:
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 façon dont je l'ai approché est de réduire des éléments spécifiques dans les cellules de la ligne, de sorte que, dans mon cas, la ligne slideUp() car les paragraphes ont été masqués, et laisse toujours un élément, h2 sur lequel cliquer pour afficher à nouveau le contenu. Si la rangée s'effondrait entièrement, il n'y aurait aucun moyen facilement évident de la ramener.
Comme @Peter Ajtai l'a noté, dans les commentaires, l'approche ci-dessus se concentre sur une seule cellule (bien que délibérément). Pour développer tous les éléments enfants p, cela fonctionnerait:
$(document).ready(
function() {
$('td p').slideUp();
$('td h2').click(
function(){
$(this).closest('tr').find('p').slideToggle();
}
);
}
);
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>
Cela ressemble beaucoup à un exemple précédent ci-dessus. J'ai trouvé en essayant de mettre en œuvre cet exemple que si la ligne du tableau à développer était cliquée alors qu'elle n'était pas développée, elle disparaîtrait et ne serait plus extensible
Pour résoudre ce problème, j'ai simplement supprimé la possibilité de cliquer sur l'élément extensible pour le faire glisser et je l'ai fait de sorte que vous ne puissiez basculer qu'en utilisant la ligne de tableau ci-dessus.
J'ai également apporté quelques modifications mineures au HTML et au jQuery correspondant.
NOTE: j'aurais juste fait un commentaire mais je n'ai pas encore le droit de lire le long post. Je voulais juste poster ceci car il m'a fallu un peu pour comprendre ce qui arrivait à la rangée de tableaux qui disparaissait.
J'espère que cela aide quelqu'un!
crédit à Peter Ajtai
Eh bien, je dirais d'utiliser le DIV au lieu de la table car ce serait beaucoup plus facile (mais il n'y a rien de mal à utiliser des tables).
Mon approche serait d'utiliser jQuery.ajax et de demander plus de données au serveur et de cette façon, le DIV sélectionné (ou TD si vous utilisez la table) se développera automatiquement en fonction du contenu demandé.
De cette façon, il économise la bande passante et l'accélère car vous ne chargez pas tout le contenu à la fois. Il ne se charge que lorsqu'il est sélectionné.
Pour répondre à votre question, non. Ce serait cependant possible avec div. La seule question est de provoquer un brouillage si la fonctionnalité était effectuée avec div plutôt qu'avec des tables.