Use same search code on many tables

[Adamhumbug]

Hi,

I have many tables that can be searched using an input box.

I have been copying and pasting the same code to every page, changing the id for the search box and the id for the table name on each page.

Is there a better way of doing this?

For reference, here is the search code.

	function searchTransportTable() {

  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("transportTableSearch");
  filter = input.value.toUpperCase();
  table = document.getElementById("transportTable");
  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";
      }
    }
  }
}

Kind Regards

 

[requinix]

Switch from IDs to classes. Or data attributes.

What's the HTML for the table, including the input?

[Adamhumbug]

Here is the html

<form id="equipmentOrderForm" action="actions/submit-equipment-order-action.php" method="post">
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend"><span class="input-group-text">Search (alt/option+s)</span></div>
<input id="equipmentTableSearch" class="form-control" type="text" placeholder="Plates...Soup Spoon...Red Wine Glass..." /><button class="btn btn-primary" name="equipment_submit_button" type="submit">Submit</button></div>
<table id="equipmentTable" class="mt-3 table table-striped table-hover table-bordered">
<thead>
<tr class="text-center">
<th>Equipment</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
  <td style="width:70%;">Item 1</td>
  <input type="hidden" name="equipmentId[]" value="1">
  <td class="text-center">
    <input name="equipmentQty[]" class="eqQty text-center up" type="text">
  </td>
 </tr>
<tr>
  <td style="width:70%;">Item 2</td>
  <input type="hidden" name="equipmentId[]" value="2">
  <td class="text-center">
    <input name="equipmentQty[]" class="eqQty text-center up" type="text">
  </td>
 </tr>
</tbody>
</table>
</form>

Here is the JS

function searchEquipmentTable() {

  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("equipmentTableSearch");
  filter = input.value.toUpperCase();
  table = document.getElementById("equipmentTable");
  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";
      }
    }
  }
}

 

Edited February 17, 2019 by Adamhumbug

[requinix]

How is searchEquipmentTable being called?

The idea is to remove IDs (unless you need them for something else), and possibly add a class or two in a couple places, so that you can find the elements you need in a generic way. For example, if you always have the whole form dedicated to this search (like you won't do two searchable tables in the same form) then you can identify the search input as being the textbox with the (eg) "table-search" class, and the table to search is the only table inside the form. element.querySelector() is the key.

An alternative is to keep IDs but use data attributes so the Javascript can read them to determine what to do. Like the form or something would have a data-table-search-input="#equipmentTableSearch" and the input would have a data-table-search="#equipmentTable". The initial code knows how to find the form/something, looks up the data-table-search-input attribute and .querySelector()s it to find the input, then looks up the data-table-search attribute and .querySelectors() it too to find the table.

One of those approaches might make more sense based on the rest of the page as well as how similar the other pages and their search forms are.