Comment masquer le milieu d'un tableau à l'aide de jQuery ?

Question

Comment masquer le milieu d'un tableau à l'aide de jQuery ?

Demandé el 18 de Octobre, 2008: Quand la question a-t-elle été
58201 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un très long tableau à 3 colonnes. Je voudrais

<table>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Start</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>End</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
</table>

Voici le résultat que j'essaie d'obtenir en utilisant jQuery.

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

J'aimerais utiliser la fonction "show/hide" de jQuery pour minimiser le tableau tout en affichant une partie des rangées supérieure et inférieure. Les rangées du milieu doivent être remplacées par un texte du type "Afficher le tableau complet" et, lorsqu'on clique dessus, elles s'agrandissent pour afficher le tableau complet du début à la fin.

Quelle est la meilleure façon de faire cela en jQuery ?

J'ai déjà essayé d'ajouter une classe "Table_Middle" à certaines des lignes, mais elle ne la cache pas complètement, l'espace qu'elle occupait est toujours là et je n'ai pas le texte pour donner à l'utilisateur un moyen de développer complètement la table.

[EDIT] Ajout d'un exemple de travail HTML inspiré de la réponse postée par Parand.

L'exemple ci-dessous est un exemple fonctionnel complet, vous n'avez même pas besoin de télécharger jquery. Il suffit de le coller dans un fichier HTML vierge.

Il se dégrade gentiment pour ne montrer que le tableau complet si Javascript est désactivé. Si Javascript est activé, il masque les lignes centrales du tableau et ajoute les liens Afficher/Masquer.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Example Show/Hide Middle rows of a table using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
                $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
                $("#HiddenRows").hide();

                $('#ShowHide,#HiddenRowsNotice').click( function() {
                    $('#HiddenRows').toggle();  
                    $('#HiddenRowsNotice').toggle();
                });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody id="ShowHide"></tbody>
                <tr><th>Month Name</th><th>Month</th></tr>
            <tbody>
                <tr><td>Jan</td><td>1</td></tr>    
            </tbody>
            <tbody id="HiddenRowsNotice"></tbody>
            <tbody id="HiddenRows">
                <tr><td>Feb</td><td>2</td></tr>
                <tr><td>Mar</td><td>3</td></tr>
                <tr><td>Apr</td><td>4</td></tr>    
            </tbody>
            <tbody>
                <tr><td>May</td><td>5</td></tr>            
            </tbody>
        </table>
    </body>
</html>

[EDIT] Lien mon article de blog et un exemple de travail.

Demandé el 18 de Octobre, 2008 par Brian Boatright

Answer 1

5 Réponses

Answer 2

56voto

Parand Points 16356

Quelque chose comme ça pourrait fonctionner :

<table>
    <tbody>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
    </tbody>
    <tbody class="Table_Middle" style="display:none">
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
    <tbody>
      <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
</table>

$('#something').click( function() {
    $('.Table_Middle').hide();
    $('.Show_Rows').show();
});

$('.Show_Rows').click( function() { 
    $('.Show_Rows').hide();
    $('.Table_Middle').show();
});

Répondu el 18 de Octobre, 2008 par Parand (16356 Points )

Answer 3

4voto

Greg Points 132247

Le moyen le plus simple est d'ajouter un <tbody> pour grouper les rangées et basculer entre none y table-row-group (attraper les exceptions et le mettre à block pour l'IE). Je ne suis pas sûr qu'il faille le rendre spécifique à jquery mais c'est la façon "normale" de faire les choses.

Répondu el 18 de Octobre, 2008 par Greg (132247 Points )

Answer 4

4voto

nickf Points 185423

Voici une solution qui ne nécessite pas de balisage supplémentaire et qui se dégrade bien.

<table id="myTable">
    <tbody>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
        <tr><td>Cell</td><td>Cell</td></tr>
    </tbody>
</table>

et le jQuery... J'ai codé en dur quelques éléments ici (comme l'identifiant de la table, le nombre de lignes à afficher, etc. Ceux-ci pourraient être mis dans un class sur le tableau si vous vouliez qu'il soit plus réutilisable. (ex : <table class="hidey_2"> )

var showTopAndBottom = 2,
    minRows = 4,
    $rows = $('#myTable tr').length),
    length = $rows.length
;
if (length > minRows) {
    $rows
        .slice(showTopAndBottom, length - showTopAndBottom)
        .hide()
    ;
    $rows
        .eq(showTopAndBottom - 1)
        .after(
            // this colspan could be worked out by counting the cells in another row
            $("<tr><td colspan=\"2\">Show</td></tr>").click(function() {
                $(this)
                    .remove()
                    .nextAll()
                    .show()
                ;
            })
        )
    ;
}

Répondu el 20 de Octobre, 2008 par nickf (185423 Points )

Answer 5

4voto

Elzo Valugi Points 10906

Essayez d'utiliser la méthode slice() :

$("#table tr").slice(1, 4).hide();

Répondu el 23 de Octobre, 2009 par Elzo Valugi (10906 Points )

Answer 6

2voto

Dan Herbert Points 38336

Si vous donnez à votre milieu <tr /> Les tags " Table_Middle "Cela rend les choses beaucoup plus faciles à faire. Ensuite, il suffit de quelques lignes de jQuery. Une pour ajouter la ligne "Show Full Table", et une autre pour ajouter un écouteur de clic pour cette ligne. Veillez à modifier l'élément colspan de l'attribut "X" au nombre de colonnes de votre tableau.

 // jQuery chaining is useful here
 $(".Table_Middle").hide()
                   .eq(0)
                   .before('<tr colspan="X" class="showFull">Show Full Table<tr/>');

$(".showFull").click(function() {
    $(this).toggle();
    $(".Table_Middle").toggle();
});

C'est utile car il se dégrade bien et est accessible sur de nombreux navigateurs/appareils. Si JavaScript est désactivé, ou si CSS est désactivé (ou tout autre scénario qui pourrait empêcher la prise en charge de ce code), il n'y a pas de ligne "show full table".

Répondu el 18 de Octobre, 2008 par Dan Herbert (38336 Points )

Comment masquer le milieu d'un tableau à l'aide de jQuery ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment masquer le milieu d'un tableau à l'aide de jQuery ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: