web-dev-qa-db-fra.com

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

J'ai une très longue table à 3 colonnes. J'aimerais

<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>

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

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

Je voudrais utiliser la fonction afficher/masquer de jQuery pour minimiser le tableau tout en affichant une partie des lignes supérieure et inférieure. Les lignes du milieu doivent être remplacées par du texte comme "Afficher le tableau complet" et, lorsque vous cliquez dessus, elles se développent pour afficher le tableau complet du début à la fin.

Quelle est la meilleure façon de procéder dans jQuery?

BTW J'ai déjà essayé d'ajouter une classe "Table_Middle" à certaines des lignes mais cela 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 d'agrandir la table pleinement.

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

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

Il se dégrade bien pour n'afficher que le tableau complet si Javascript est désactivé. Si Javascript est activé, il masque les lignes du tableau du milieu 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>

[MODIFIER] Liez mon article de blog et exemple de travail.

jqueryhtmlhtml-table
49
Brian Boatright

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();
});
56
Parand

Le moyen le plus simple consiste à ajouter un <tbody> in pour regrouper les lignes et basculer entre none et table-row-group (intercepter les exceptions et le définir sur block pour IE). Je ne suis pas sûr de le rendre spécifique à jquery mais c'est la façon "normale" de faire les choses.

4
Greg

Voici une solution qui ne nécessite aucun 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 attribut class sur la table si vous le vouliez être plus réutilisable (par exemple: <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()
                ;
            })
        )
    ;
}
4
nickf

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

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

Si vous donnez votre milieu <tr /> marque le "Table_Middle "classe, il est beaucoup plus facile à faire. Ensuite, il ne prend que quelques lignes de jQuery. Un pour ajouter la ligne" Afficher le tableau complet ", et un autre pour ajouter un écouteur de clic pour cette ligne. Assurez-vous de changer le colspan valeur "X" de l'attribut au nombre de colonnes de votre table.

 // 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();
});

Ceci est utile car il se dégrade bien et est accessible sur de nombreux navigateurs/appareils. Si JavaScript est désactivé ou que CSS est désactivé (ou tout autre scénario pouvant entraîner la non prise en charge de ce code), il n'y a pas de ligne "afficher le tableau complet".

2
Dan Herbert

Je le ferais probablement comme ceci:

<table>
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody id="hidden-rows">
        <tr>
            <td colspan="3">
                <a href="#" onclick="$('#hidden-rows').hide();$('#extra-rows').show();">
                    Show hidden rows
                </a>
            </td>
        </tr>
    </tbody>
    <tbody id="extra-rows" style="display: none;">
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data1</td>
            <td>data1</td>
        </tr>
        ...
    </tbody>
</table>

Ce n'est pas une excellente méthode, car elle ne se dégrade pas bien.

Pour qu'il se dégrade bien, vous devez d'abord afficher toutes les lignes, puis les masquer avec votre fonction prête pour le document jQuery, et également créer la ligne avec le lien.

En outre, votre méthode pour donner les lignes pour masquer une classe particulière devrait également fonctionner. Le jQuery ressemblerait à ceci:

$(document).ready(function() {
    $('tr.Table_Middle').hide();
});

Cependant, vous devez toujours créer la ligne avec le lien pour les afficher.

1
SpoonMeiser