CODE EXAMPLE FOR JAVASCRIPT

multiple filter html table using javascript

function SearchData() {

  var name = document.getElementById("idName").value.toUpperCase();
  var country = document.getElementById("idCountry").value.toUpperCase();
  var age = document.getElementById("idAge").value.toUpperCase();
  var salary = document.getElementById("idSalary").value.toUpperCase();

  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {

    var rowName = tr[i].getElementsByTagName("td")[0].textContent.toUpperCase();
    var rowCountry = tr[i].getElementsByTagName("td")[1].textContent.toUpperCase();
    var rowAge = tr[i].getElementsByTagName("td")[2].textContent.toUpperCase();
    var rowSalary = tr[i].getElementsByTagName("td")[3].textContent.toUpperCase();

    if (name != 'ALL' && country != 'ALL') {
      if (rowName == name && rowCountry == country) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } else if (rowName != '' || rowCountry != '') {
      if (name != 'ALL') {
        if (rowName == name) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
      if (country != 'ALL') {
        if (rowCountry == country) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }

  }
}