How do I hide a div containing an entire table if table only has 1 row?-CodePudding

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>

CodePudding user response：

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 onl oad:

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.

CodePudding user response：

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  data-final-rows-to-not-sort="0" data-hide-style="1" data-alt-id="2">
    <tbody>
      <tr>
        <th  data-collation-form="0-9">Box #</th>
        <th >Box Name</th>
        <th  data-collation-form="0-9">Reported</th>
      </tr>

    </tbody>
  </table>
</div>