Así que tengo una tabla donde los usuarios pueden filtrar filas específicas, marcando una casilla de verificación. Si se selecciona una casilla de verificación, algunas filas obtendrán el estado hidden .
Quiero crear una matriz con todas las filas que no estén ocultas, pero parece que no puedo obtener el estado de <td> .
La identificación de las tablas es ftp_table y las filas de las que necesito los datos tienen la download del nombre de la clase. Traté de hacer algo como esto, para obtener el valor de visibility , pero sin suerte. La función se activa después de que se haya ejecutado una función de hide row .
function download_log() { var rows = document.getElementsByClassName("download"); var log = []; for (var i = 0; i < rows.length; i++) { // Check if item is hidden or not (create a if and push into array) console.log(getComputedStyle(rows[i]).visibility); // append new value to the array IF NOT HIDDEN log.push(rows.item(i).innerHTML); } }¿El resultado que obtengo cuando escondo algo es que todo está visible?:
Aquí hay un ejemplo de la tabla, donde se han ocultado todas las filas de info :
<table class="ftp_table" id="ftp_table"> <tbody> <tr class="grey"> <th>Log</th> </tr> <tr class="info" hidden> <td class="download">2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td> </tr> <tr class="debug"> <td class="download">2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing</td> </tr> <tr class="info" hidden> <td class="download">2021-10-06 12:38:16.059 INFO [Wrapper:21] Downloading</td> </tr> <tr class="info grey" hidden> <td class="download">2021-10-06 12:38:16.061 INFO [Handler:55] AV+</td> </tr> <tr class="debug grey"> <td class="download">2021-10-06 12:38:16.063 DEBUG [Session:84] GET'</td> </tr> </tbody> </table>Podrías usar el siguiente selector:
document.querySelectorAll("#ftp_table tr:not([hidden]) td.download"); Seleccionará los elementos td.download en tr que no están hidden en su table .
var visibleTds = document.querySelectorAll("#ftp_table tr:not([hidden]) td.download"); var arr = []; for(let i = 0; i < visibleTds.length; i++){ arr.push(visibleTds[i].innerText); } console.log(arr); <table class="ftp_table" id="ftp_table"> <tbody> <tr class="grey"> <th>Log</th> </tr> <tr class="info" hidden> <td class="download">2021-10-06 12:38:15.946 INFO [conftest:101] -------------- Global Fixture Setup Started --------------</td> </tr> <tr class="debug"> <td class="download">2021-10-06 12:38:16.009 DEBUG [Geni:37] Initializing</td> </tr> <tr class="info" hidden> <td class="download">2021-10-06 12:38:16.059 INFO [Wrapper:21] Downloading</td> </tr> <tr class="info grey" hidden> <td class="download">2021-10-06 12:38:16.061 INFO [Handler:55] AV+</td> </tr> <tr class="debug grey"> <td class="download">2021-10-06 12:38:16.063 DEBUG [Session:84] GET'</td> </tr> </tbody> </table>¿Por qué no usa classList en lugar de accesorios de estilo?
Me gusta :
rows[i].classList.contains("hidden")