Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Use a textbox to count number of visible rows of html table

I currently count the number of visible rows in an html table, before and after applying a search. The result count is placed into the textbox by an onclick event of the button "results". Is it possible to get the result count directly in the text box, updated on change of the number of visible rows?

html:
results

The function works fine onclick of the button. Textbox onclick also works, but I would like to avoid the clicks and have the value auto-updating in the textbox.

Tags:

2

Answers


  1. 0

    You can use a MutationObserver to monitor changes to the tbody element and then check the number of visible rows. The one quirk here is that CSS changes can’t be checked, so I used an HTML attribute to represent visibility which will be monitored by the observer.

    const tbody = document.querySelector("tbody")
const rowCount = document.querySelector("#rowcount")

function updateRowCount() {
  const rows = new Set(tbody.querySelectorAll("tr"))
  rows.forEach((row) => {
    if (row.getAttribute("visibility") == "hidden") {
      rows.delete(row)
    }
  })
  rowCount.textContent = rows.size
}

const observer = new MutationObserver(() => updateRowCount());

observer.observe(tbody, {
  subtree: true,
  childList: true,
  attributes: true
});

updateRowCount()

setTimeout(() => {
  const row = document.createElement("tr")
  const data = document.createElement("td")
  data.textContent = "row 3"
  row.appendChild(data)
  tbody.appendChild(row)
}, 3000)

setTimeout(() => {
  tbody.querySelectorAll("tr")[0].removeAttribute("visibility")
}, 6000)
    [visibility="hidden"] {
  visibility: hidden;
}
    <p>rows: <span id="rowcount"></span></p>
<table>
  <tbody>
    <tr visibility="hidden"><td>row 1</td></tr>
    <tr><td>row 2</td></tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    it would be helpful if you share also the JS code so we can see which one we can modify to achieve the result you need.

    Based on your scenario, what you need to do is to move the code from the onclick of the results button to the function where you generate the rows (after generation of rows).

    Assuming that your function for the generation of rows is search(), this will be flow:

    // your existing function for generation of row
function search() {
  // generation of rows...
  document.getElementsByTagName("tbody")[0].innerHTML = 
          `<tr>
            <td>Apple</td>
        </tr>
        <tr>
            <td>Orange</td>
        </tr>
        <tr>
            <td>Banana</td>
        </tr>`
  // paste here the code from the onclick of the result button...
  document.getElementById("textbox1").value = 3;
}
    <button type="button" onclick="search()">Search</button>
<input type="number" value="5" id="textbox1">
<br>
<br>
<table border="1">
    <thead>
        <tr>
            <th>Fruits</th>
        </tr>
    </thead>
    <tbody id>
        <tr>
            <td>Apple</td>
        </tr>
        <tr>
            <td>Orange</td>
        </tr>
        <tr>
            <td>Banana</td>
        </tr>
        <tr>
            <td>Grapes</td>
        </tr>
        <tr>
            <td>Strawberry</td>
        </tr>
    </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search