CODEWITHSUNDEEP
javascripthtml
Tobit
Tobit

Reputation: 406

How to ignore a table inside another table when I am looking for tr elements?

I have the following script which hides table rows depending on the name in the first column. It works pretty well for single tables.

I add a table inside a row with additional information for the rooms of the location. Now also the rows in the additional table are marked as hidden if the search string not match.

How can I modify the mySearchFuntion so that only row from the main table myTable are hidden? The script should ignore the other tables.

function mySearchFunction() {
    // Declare variables
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    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) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
        }
    }
}
<input type="text" id="myInput" onkeyup="mySearchFunction()" class="form-control" autofocus placeholder="Search by location name...">

<table id="myTable">
  <tr>
     <th>Location name</th>
     <th>Rooms</th>
  </tr>
  <tr>
    <td>loction AB</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>loction EF</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Thank you very much for your help.

Upvotes: 2

Views: 1076

Answers (2)

Mamun
Mamun

Reputation: 68943

If you want to get only the direct children of the main table, you can use children property.

Change the following:

table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");

To

table = document.querySelector("#myTable tbody");
tr = table.children;


function mySearchFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.querySelector("#myTable tbody");
  tr = table.children;

  // Loop through all table rows, and hide those who don't match the search query
  for (let i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<input type="text" id="myInput" onkeyup="mySearchFunction()" class="form-control" autofocus placeholder="Search by location name...">

<table id="myTable">
  <tr>
     <th>Location name</th>
     <th>Rooms</th>
  </tr>
  <tr>
    <td>loction AB</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>loction EF</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 4

javimovi
javimovi

Reputation: 386

This works?

JS

// Hides main rows that do not have a table inside
function mySearchFunction() {
   $('#myTable > tr').has('table').css("display","block")
   $('#myTable > tr').has(':not(table)').css("display","none")
}

HTML

<input type="text" id="myInput" onkeyup="mySearchFunction()" class="form-control" autofocus placeholder="Search by location name...">

<table id="myTable">
  <tr>
     <th>Location name</th>
     <th>Rooms</th>
  </tr>
  <tr>
    <td>loction AB</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>loction EF</td>
    <td>
      <table>
        <tr>
          <td>room 1</td>
        </tr>
        <tr>
          <td>room 2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: -1

Related Questions