Using the following JavaScript, I am successfully filtering a table; however, sub-tables within each row are disappearing.

function filter_country_table_country_name_or_code() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("country_name_or_code_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("country_table");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function clear_country_table_country_name_or_code_field() {
    document.getElementById('country_name_or_code_input').value = "";
    filter_country_table_country_name_or_code()
}

<table id="country_table">
  <tr>
    Main Table Content Row 1
    <table>
      <tr>
        <td>
          Sub-Table Content Row 1
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    Main Table Content Row 2
    <table>
      <tr>
        <td>
          Sub-Table Content Row 2
        </td>
      </tr>
    </table>
  </tr>
</table>

Using the following JavaScript, I am successfully filtering a table; however, sub-tables within each row are disappearing.

function filter_country_table_country_name_or_code() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("country_name_or_code_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("country_table");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function clear_country_table_country_name_or_code_field() {
    document.getElementById('country_name_or_code_input').value = "";
    filter_country_table_country_name_or_code()
}

<table id="country_table">
  <tr>
    Main Table Content Row 1
    <table>
      <tr>
        <td>
          Sub-Table Content Row 1
        </td>
      </tr>
    </table>
  </tr>
  <tr>
    Main Table Content Row 2
    <table>
      <tr>
        <td>
          Sub-Table Content Row 2
        </td>
      </tr>
    </table>
  </tr>
</table>

What could be causing this and what needs to change in my JavaScript?

Thank you.

• javascript
• html
• filter

• 2 Your HTML is invalid. <table> can not be a child of <tr>. Before trying to investigate any problems in the JavaScript, you'll want to start with valid HTML. – David Commented Mar 21 at 18:28
• Additionally... If after updating your HTML there is still a problem in the code, please update the question to include a minimal reproducible example which demonstrates that problem. Currently the "sub-tables" are not "disappearing". (Likely because the JavaScript code here is superfluous, nothing uses it.) – David Commented Mar 21 at 18:35
• tr = table.getElementsByTagName("tr"); line selects trs in both parent and daughter tables. Also table object has its own DOM model. which may work better in your case. – Alex Kudryashev Commented Mar 21 at 18:51

1 Answer 1

Have a study of this version using eventListeners

I had to guess your HTML which was not valid

window.addEventListener('load', () => {
  const input = document.getElementById("country_name_or_code_input");
  const clearButton = document.querySelector("button"); // Keeping this since no ID
  const table = document.getElementById("country_table");
  const rows = Array.from(table.rows).map(row => {
    const [name, code] = row.cells;
    console.log(name.textContent, code.textContent);
    return {
      row,
      name: name.textContent.toUpperCase(),
      code: code.textContent.toUpperCase()
    };
  });

  const filterCountryTable = () => {
    const filter = input.value.toUpperCase();
    rows.forEach(({ row, name, code }) => {
      row.style.display = name.includes(filter) || code.includes(filter) ? "" : "none";
    });
  };

  const clearCountryFilter = () => {
    input.value = "";
    filterCountryTable();
  };

  input.addEventListener("input", filterCountryTable);
  clearButton.addEventListener("click", clearCountryFilter);
});

<table id="country_table">
  <tr>
    <td>United States
      <table>
        <tr>
          <td>Sub-Table Content Row 1</td>
        </tr>
      </table>
    </td>
    <td>US</td>
  </tr>
  <tr>
    <td>Canada
      <table>
        <tr>
          <td>Sub-Table Content Row 2</td>
        </tr>
      </table>
    </td>
    <td>CA</td>
  </tr>
</table>
<input id="country_name_or_code_input" type="text">
<button>Clear</button>