Filter three columns together in an HTML table prefilled based on the URL using JavaScript

Question

I would like to use the trailing content of a URL to filter an HTML table on three columns simultaneously. I want to do this so that a list of automatically generated URLs can be used in an external dataframe to produce a filtered table, rather than generating separate HTML files for each combination of levels for these columns.

So far, I've been able to parse the trailing URL text and fill in an input field that individually filters on three columns, and the filter functions but only on keyup:

https://eviemsm4.github.io/tabletemplate2.html?var1=a&var2=f&var3=germany

I'd like to filter all three columns together on page load, but I'm not quite sure how...

Any help would be much appreciated.

Here follows the code (note that the snippet will not pull in trailing information to pre-populate the column filters - please see the GitHub link above to the format of the trailing information):

function prefill() {
  var loc = location.href;
  var locationField1 = document.getElementById('myInput1');
  var locationField2 = document.getElementById('myInput2');
  var locationField3 = document.getElementById('myInput3');
  const var1 = loc.split('var1=').pop();
  var part1 = var1.substring(
    var1.lastIndexOf("var1=") + 1,
    var1.lastIndexOf("&var2=")
  );
  const var2 = loc.split('&var2=').pop();
  var part2 = var2.substring(
    var2.lastIndexOf("&var2=") + 1,
    var2.lastIndexOf("&var3=")
  );
  const var3 = loc.split('&var3=').pop();
  var part3 = var3.substring(
    var3.lastIndexOf("&var3=") + 1,
    var3.lastIndexOf("")
  );
  part1 = part1.replace(/%20/g, " ");
  part1 = part1.replace(/%2F/g, "/");
  part2 = part2.replace(/%20/g, " ");
  part2 = part2.replace(/%2F/g, "/");
  part3 = part3.replace(/%20/g, " ");
  part3 = part3.replace(/%2F/g, "/");
  locationField1.value = part1;
  locationField2.value = part2;
  locationField3.value = part3;
}

function performReset() {
  document.getElementById("inputName").value = "";
  document.getElementById("inputCity").value = "";
  document.getElementById("inputCountry").value = "";
  filterTable(event, 0);
}

function filterTable(event, index) {
  var filter = event.target.value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;
  for (var i = 0; i < rows.length; i++) {
    var firstCol = rows[i].cells[0].textContent.toUpperCase();
    var secondCol = rows[i].cells[1].textContent.toUpperCase();
    var thirdCol = rows[i].cells[2].textContent.toUpperCase();
    if ((firstCol.indexOf(filter) > -1 && index == 0) || (secondCol.indexOf(filter) > -1 && index == 1) || (thirdCol.indexOf(filter) > -1 && index == 2)) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}


document.querySelectorAll('input.w3-input').forEach(function(el, idx) {
  el.addEventListener('keyup', function(e) {
    filterTable(e, idx);
  }, false);
});



  Filter Table Test

  

  
    
    
      
        
        
        
      
    
    
    
      
        Alfreds Futterkiste
        Berlin
        Germany
      
      
        Berglunds snabbköp
        Lule 
        Sweden
      
      
        Centro comercial Moctezuma
        México D.F.
        Mexico
      
      
        Ernst Handel
        Graz
        Austria
      
      
        FISSA Fabrica Inter. Salchichas S.A.
        Madrid
        Spain
      
      
        Galería del gastrónomo
        Barcelona
        Spain
      
      
        Island Trading
        Cowes
        UK
      
      
        Königlich Essen
        Brandenburg
        Germany
      
      
        Laughing Bacchus Wine Cellars
        Vancouver
        Canada
      
      
        Magazzini Alimentari Riuniti
        Bergamo
        Italy
      
      
        North/South
        London
        UK
      
      
        Paris spécialités
        Paris
        France
      
      
        Rattlesnake Canyon Grocery
        Albuquerque
        USA
      
      
        Simons bistro
        København
        Denmark
      
      
        The Big Cheese
        Portland
        USA
      
      
        Vaffeljernet
        Århus
        Denmark
      
      
        Wolski Zajazd
        Warszawa
        Poland

user_2951933 · Answer

A quick fix would be to call your method filterTable function on load by passing one of the args you pass via the url props. You should call it in the prefill function

filterTable(var1 || var2 || var3, 0);

and in the filterTable you should alter the implementation slightly

Instead of var filter = event.target.value.toUpperCase();

You should use something like this:

var filter = typeof event === 'object' ? event.target.value.toUpperCase():
event.toUppercase()

Filter three columns together in an HTML table prefilled based on the URL using JavaScript

1 Answers