Bastante nuevo en JS y html. Intenté usar esta función y no veo resultados. Agradecería algo de ayuda. Aquí está el código JS y el div y la tabla html donde se usaría.
function emptyTableRedisplay(table, uRowsMin) { if (! table || ! table.rows || table.rows.length >= uRowsMin) return; let styleHide = table.getAttribute("data-hide-style"); if (! styleHide || styleHide === "") return; let idAlt = table.getAttribute("data-alt-id"); if (! idAlt || idAlt === "") return; # find the enclosing div let el = table.parentNode; while (el && el.tagName.toLowerCase() == "div") el = el.parentNode; if (! el) return; var alt = el.parentNode.parentNode.getElementById(idAlt); if (! alt) return; el.classList.add(styleHide); alt.classList.remove(styleHide); }En el html, esto es lo que hice
<div id='emptyTableRedisplay'> <h3>Header</h3> <p>Notes</p> <table class='data-table monetary' data-final-rows-to-not-sort='0' data-hide-style='1' data-alt-id='2'> <tbody> <tr> <th class='sortable-col' data-collation-form='0-9'>Box #</th> <th class='sortable-col'>Box Name</th> <th class='sortable-col' data-collation-form='0-9'>Reported</th> </tr> </tbody> </table>Puede verificar si la longitud de la fila de la tabla es igual a 1, si es así, oculta el div
const emptyTableRedisplay = document.getElementById("emptyTableRedisplay"); const tableRows = document.querySelectorAll("#emptyTableRedisplay tr"); if (tableRows.length === 1) { // uncomment the line below // emptyTableRedisplay.style.display = "none"; //Just for demo emptyTableRedisplay.style.backgroundColor = "lightblue" } <div id="emptyTableRedisplay"> <h3>Header</h3> <p>Notes</p> <table class="data-table monetary" data-final-rows-to-not-sort="0" data-hide-style="1" data-alt-id="2"> <tbody> <tr> <th class="sortable-col" data-collation-form="0-9">Box #</th> <th class="sortable-col">Box Name</th> <th class="sortable-col" data-collation-form="0-9">Reported</th> </tr> </tbody> </table> </div>No estoy seguro de haberte entendido correctamente, pero si el objetivo es ocultar la tabla si hay una fila, puedes ejecutar esta función onLoad:
function emptyTableRedisplay() { const table = document.getElementById('emptyTableRedisplay'); const rows = table.querySelectorAll('tr'); if(rows.length == 1) { table.style.display = 'none'; } }Si va a agregar y eliminar filas después de la carga, deberá usar un detector de eventos en su lugar.
O simplemente puedes hacer esto:
const tbl = document.querySelector("#emptyTableRedisplay table"); if(tbl.rows.length==1) tbl.closest("div").style.display = "none"; <p>Before the div</p> <div id="emptyTableRedisplay"> <h3>Header</h3> <p>Notes</p> <table class="data-table monetary" data-final-rows-to-not-sort="0" data-hide-style="1" data-alt-id="2"> <tbody> <tr> <th class="sortable-col" data-collation-form="0-9">Box #</th> <th class="sortable-col">Box Name</th> <th class="sortable-col" data-collation-form="0-9">Reported</th> </tr> </tbody> </table> </div> <p>After the div</p>