Comment afficher/masquer HTML cachés lignes de la table à l'aide de JavaScript (pas de jQuery)

Edit: Ce qui a été répondu ci-dessous.

J'aimerais avoir un tableau HTML qui a caché les lignes entre chaque rangée de sièges avec plus d'informations sur le niveau supérieur de lignes. Lorsque vous cliquez sur une expand/collapse lien de l'image dans la première colonne, le caché de la ligne de visibilité de la bascule de display:none; display:table-row;. Je n'ai pas écrit JavaScript dans un tout et doivent être en mesure de le faire strictement en JavaScript et ne peut pas utiliser le jQuery toggle ().

Comment puis-je utiliser JavaScript pour trouver le frère class="subRow" de l'class="parentRow" que le bouton est situé à l'intérieur de la table et ensuite activer /désactiver la visibilité de lignes frère?

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";
}

OriginalL'auteur Robert | 2015-06-17

  1. 9

    Passer votre gestionnaire d'événement une référence à la ligne qui est activée à l'aide de this:

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

    Puis mettre à jour votre toggleRow fonction comme suit:

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

    Vous souhaitez peut-être envisager de créer une fonction pour naviguer dans l'arborescence du DOM (de sorte que cette fonction ne se cassent pas quand/si vous modifiez votre code HTML).

    Je savais que j'étais sur la bonne voie, mais a été vue sur quelque chose. Je viens de navigation pour les autres AFIN de threads à essayer de comprendre comment obtenir le parent <tr> les deux niveaux dans les DOM à partir de la lien de l'image puis de référence le frère suivant. Il a parfaitement fonctionné et je me sens stupide. Merci!

    OriginalL'auteur gurch101

  2. 0

    L'utilisation de l'attribut id pour obtenir les éléments au lieu de la classe et de donner une ligne un numéro unique dans elle est id pour les différentes.

    <tr style="display: none;" class="subRow" id="subRow1">
.
.
.
<tr style="display: none;" class="subRow" id="subRow2">
.
.
<tr style="display: none;" class="subRow" id="subRow3">
    Seulement travaillé pour moi dans Chrome 66 quand il y avait 1 colonne dans la table

    OriginalL'auteur Hamid Parchami

  3. 0

    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";
}

    OriginalL'auteur Samuel Cook