web-dev-qa-db-fra.com

Comment afficher/masquer les lignes de tableau HTML masquées à l'aide de JavaScript (pas de jQuery)

Edit: Ceci a été répondu ci-dessous.

Je voudrais avoir un tableau HTML qui a caché des lignes entre chaque ligne avec plus d'informations sur les lignes de niveau supérieur. Lorsque vous cliquez sur un lien d’agrandissement/réduction d’image dans la première colonne, la visibilité de la ligne masquée bascule à l’affichage: aucun; pour afficher: table-row ;. Je n'ai pas écrit JavaScript depuis longtemps et je dois pouvoir le faire strictement en JavaScript. Je ne peux pas utiliser la méthode jQuery toggle (). 

Comment utiliser JavaScript pour rechercher le frère avec class = "subRow" du classeur avec = class = "parentRow" dans lequel se trouve le bouton dans la table, puis basculer la visibilité de cette ligne?

HTML

<table style="width:50%">
    <caption>Test Table</caption>
    <thead>
        <tr align="center">
            <th><span class="offscreen">State Icon</span></th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center" class="parentRow">
            <td><a href="#" onclick="toggleRow();"><img alt="Expand row" height="20px;" src="expand.png"></a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr style="display: none;" class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>
....
    </tbody>
</table>

CSS

.offscreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}

.subRow {
    background-color: #CFCFCF; 
}

JavaScript

function toggleRow() {
    var rows = document.getElementsByClassName("parentRow").nextSibling;
    rows.style.display = rows.style.display == "none" ? "table-row" : "none";
}
javascripthtmlcsstogglehtml-table
3
Robert

Transmettez à votre gestionnaire d’événements une référence à la ligne sur laquelle vous avez cliqué à l’aide de this:

<td><a href="#" onclick="toggleRow(this);"><img alt="Expand row" height="20px;" src="expand.png"></a></td>

Puis mettez à jour votre fonction toggleRow comme suit:

function toggleRow(e){
    var subRow = e.parentNode.parentNode.nextElementSibling;
    subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';    
}

Vous pouvez envisager de créer une fonction à usage général pour naviguer dans l'arborescence DOM (afin que cette fonction ne soit pas interrompue lorsque vous modifiez votre code HTML). 

9
gurch101

Cela a fonctionné pour moi:

function toggleRow() {
    var row = document.getElementsByClassName("parentRow")[0];
    var next = row.parentNode.rows[ row.rowIndex ];
    next.style.display = next.style.display == "none" ? "table-row" : "none";
}
0
Samuel Cook

Utilisez l'attribut id pour obtenir des éléments au lieu de classe et attribuez à chaque ligne un numéro unique dans son identifiant pour les rendre différents.

<tr style="display: none;" class="subRow" id="subRow1">
.
.
.
<tr style="display: none;" class="subRow" id="subRow2">
.
.
<tr style="display: none;" class="subRow" id="subRow3">
0
Hamid Parchami