javascript - una - tablas con filas desplegables html

Cómo mostrar/ocultar filas ocultas de tablas HTML usando JavaScript(no jQuery)

Question

Editar: esto ha sido respondido a continuación.

Me gustaría tener una tabla HTML que tenga filas ocultas entre cada fila con más información sobre las filas de nivel superior. Al hacer clic en un enlace expand / collapse image en la primera columna, la visibilidad de la fila oculta se alternará desde la pantalla: none; para mostrar: tabla-fila ;. No he escrito JavaScript desde hace tiempo y necesito poder hacer esto estrictamente en JavaScript y no puedo usar el método jQuery toggle ().

¿Cómo puedo usar JavaScript para buscar el hermano con class = "subRow" de with class = "parentRow" en el que se encuentra el botón dentro de la tabla y luego alternar la visibilidad de esa fila de hermanos?

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

Answer 1

Esto funcionó para mí:

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

Answer 2

Pase a su controlador de eventos una referencia a la fila en la que se hace clic con this :

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

Luego actualice su función toggleRow de la siguiente manera:

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

Puede considerar crear una función de propósito general para navegar por el árbol DOM (para que esta función no se rompa cuando / si cambia su HTML).

Answer 3

Use el atributo id para obtener elementos en lugar de clases y otorgue a cada fila un número único en su ID para hacerlos diferentes.

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