Fairly new to JS and html. I tried using this function and I'm not seeing results. Would appreciate some help. Here is the JS code and the html div and table where it would be used.
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);
}
In the html, this is what I did
<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>
You can check if table row length is equal to 1, if so then you hide the 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>I'm not sure if I understood you correctly, but if the goal is to hide the table if there is one row you can execute this function onLoad:
function emptyTableRedisplay() {
const table = document.getElementById('emptyTableRedisplay');
const rows = table.querySelectorAll('tr');
if(rows.length == 1) {
table.style.display = 'none';
}
}
If you will be adding and removing rows after loading you will need to use an event listener instead.
Or you can simply do this:
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>