Search data from multiple columns in table

Question

I have made a table that outputs data from a database. I added a searchbar that works for 1 column, but my goal is to make it work for two columns in the table: The 'Locatie' column and the 'Nr.' column. Besides that (but less important) I would like the thead to stay visible when something is searched. Right now it disappears and only shows the data that is searched for.

My code is as following:

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("p")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
}       
  }
}
</script>



<div class="titel-top">


  <div class="col-xs-10">
    <div class="input-group">
  <input type="text" class="form-control" id="myInput" placeholder="Zoeken naar locatie..." onkeyup="myFunction()">
  <!--<span class="input-group-btn">
    <button class="btn btn-secondary" type="button">Zoeken</button>
  </span>-->
</div>
  </div>



</div>



<?php
$page_title = "Sensors";
?>

<div class="row">

<table class="table" id="myTable">
<thead>
  <tr>
    <th><p class="text-14">Status</p></th>
    <th><p class="text-14">Locatie</p></th>
    <th><p class="text-14">Nr.</p></th>
    <th><p class="text-14">Sensors</p></th>
    <th></th>
  </tr>
</thead>
<tbody>

  <tr>
    <td><div id="status"></div></td>
    <td><p class="text-12"><?php echo $locatie ?></p></td>
    <td><p class="text-12"><?php echo $huisnummer ?></p></td>
    <td><p class="text-12">5</p></td>
    <td class="meer-informatie-verhuurder"><svg class="chev-forward" viewBox="0 0 24 24">
    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
    </svg></td>
  </tr>
  </tbody>
  </table>
</div>


<?php
//bekijkt of één van de waardes rood is.
if($co2 >1000 OR $humidity >80 OR $temperature >25 OR $temperature <9 OR $humidity <30) {
?>
<script>
    document.getElementById("status").style.backgroundColor = "#ff1744";
</script>

<?php 
 //bekijkt of één van de waardes oranje is.
}
elseif ($co2 >800 OR $humidity >60 OR $temperature >20 OR $temperature >9 OR $humidity >30) { 
?>
<script>
    document.getElementById("status").style.backgroundColor = "#dc9b10";
</script>
<?php
 //Als er geen rode of oranje status is wordt de status groen.
}else { //maakt status groen.

?>
<script>
    document.getElementById("status").style.backgroundColor = "#51c53f";
</script>

<?php
}
?>

The table can be found on the website: http://st359450.cmd17c.cmi.hanze.nl/senz/verhuurder-sensors.php You will need to log in: username '1' and password 'Hallo'

I include the header, footer etc. at the top and bottom of the page, I didn't think they would be relevant for this question. I hope you guys can help me.

Answer 1

 td = tr[i].getElementsByTagName("p")[0]; 

In this line, as you access the element at index 0 in the returned list of <p> elements, you are incidentally getting the values from "Locatie" column.

A quick fix would be to read the value from element at index 1 as well, and show the tr element if either of them contain given word:

var paragraphsInRow = tr[i].getElementsByTagName("p");
var locatie = paragraphsInRow[0];
var nr = paragraphsInRow[1];

if (locatie || nr) {
  if (locatie.innerHTML.toUpperCase().indexOf(filter) > -1
        || nr.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
}

---

Possible improvements:

1. Don't filter using innerHTML . As evident from the name, it returns the HTML content of the paragraph element. Currently that paragraph element may not contain HTML elements, but in future it might. So it is best to use innerText for filtering data - which only contains the visible text within the element.

2. Instead of identifying data through tr[i].getElementsByTagName("p")[0] , use a better CSS selector. I would suggest setting a CSS class in the HTML, and then using a descendant selector like tr[i].querySelector("p.locatie") . Your HTML should then look like:

    <tr> <td><div id="status"></div></td> <!-- Notice the CSS class added here. --> <td><p class="text-12 locatie"><?php echo $locatie ?></p></td> <td><p class="text-12"><?php echo $huisnummer ?></p></td> <td><p class="text-12">5</p></td> <td class="meer-informatie-verhuurder"><svg class="chev-forward" viewBox="0 0 24 24"> <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /> </svg></td> </tr> 

   Doing so would make it easier to change the markup in future. For instance, if you add another column between "Status" and "Locatie", an index based selector would give incorrect results.