Estoy generando una lista de teléfonos a partir de registros de Active Directory y quiero ocultar filas en mi tabla que no tienen una entrada para ipPhone (columna 5 de mi tabla).
Mi Javascript es esencialmente así:
table = document.getElementById("myTable1"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td"); dbg = td[5].innerHTML; // <<< Error here. if (dbg == "") { tr[i].style.display = "none"; } } <table id="myTable1" border="1"> <tr> <td>Martin</td> <td>Roger</td> <td>Operator</td> <td></td> <td>Office</td> <td id="ipPhone"></td> <td></td> <td>Ronan.Martina@mydomain.com</td> <td>martinro</td> <td></td> </tr> </table> El depurador de Chrome me está dando: Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML') y ninguna de las filas está oculta.
¿Alguien puede detectar el problema?
trata eso:
const myTable = document.getElementById('myTable1'); myTable .querySelectorAll(' tr > td:nth-of-type(5):empty') .forEach( td5 => { td5.closest(('tr').style.display = 'none'; })No puede tener más de un solo elemento en una página con id="ipPhone" . Esto debe arreglarse .
Use una clase CSS en su lugar, y en lugar de moverse con índices, use una forma de bucle mucho más legible y fácil:
for (const cell of document.querySelectorAll("#myTable1 td.ipPhone")) { cell.parentElement.hidden = !cell.textContent; }Con los selectores de nivel 4, podrá lograr esto usando solo CSS:
tr:has(td.ipPhone:empty) { display: none; }