How do I write a live search function for my dynamically generated table?

Question

I have a script that generates a dynamic table from values stored in an array. I would like to write a live search function searchByNumber(). How do I write a live search function based on values in the Amount and Time column that would dynamically filter the exiting table?

Find below an image to illustrate what a generated table would look like:

Again, NOTE that the search values will be based on the values in the Amount and Time columns as seen in the image above.

Find below the script which shows the array configuration, and how the dynamic table is generated:

var array = [{
  TransactionTime: "August 2, 2019 4:34 PM"
  amount: "100"
  payersNumber: "0705357658"
  paymentStatus: "Success! payment received."
  statusIcon: "<i class='fas fa-check-circle colorBlue'></i> <a 
  href='#'>"
  transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a"
  waitersName: "John.P"
},
{
  TransactionTime: "August 1, 2019 2:34 AM"
  amount: "150"
  payersNumber: "0705357658"
  paymentStatus: "Failed! payment not received."
  statusIcon: "<i class='fas fa-check-circle colorRed'></i> <a 
  href='#'>"
  transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a"
  waitersName: "Maggie.A"
}];

table = document.getElementById("table");

var currentTransaction;
var keys = ["statusIcon", "amount", "TransactionTime"];
for (var i = 0; i < array.length; i++) {
console.log("Number of transactions: " + array.length);
var newRow = table.insertRow(table.length);

  currentTransaction = array[i];
  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerText = currentTransaction[keys[b]];
  }
}

Following is the HTML code showing the table, also notice the search field:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css">

<form id="Searchform" class="Search form delay-4.9s">
  <input id="searchPhoneNumber" type="text" onkeyup="searchByNumber()">     
</form>     


<table id="table" border="1">
  <tr>
    <th>Status</th>
    <th>Amount</th>
    <th>Time</th>
  </tr>
</table>

How do I write a live search function searchByNumber() to filter the already generated table?

Looking forward to your help.

Answer 1

here is solution using pure javascript excluding the first row which is header.

var array = [{
  TransactionTime: "August 2, 2019 4:34 PM",
  amount: "100",
  payersNumber: "0705357658",
  paymentStatus: "Success! payment received.",
  statusIcon: "<i class='fas fa-check-circle colorBlue'></i> <a ,href='#'>",
  transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a",
  waitersName: "John.P",
},
{
  TransactionTime: "August 1, 2019 2:34 AM",
  amount: "150",
  payersNumber: "0705357658",
  paymentStatus: "Failed! payment not received.",
  statusIcon: "<i class='fas fa-check-circle colorRed'></i> <a ,href='#'>",
  transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a",
  waitersName: "Maggie.A",
}];


table = document.getElementById("table");

var currentTransaction;
var keys = ["statusIcon", "amount", "TransactionTime"];
for (var i = 0; i < array.length; i++) {
  console.log("Number of transactions: " + array.length);
  var newRow = table.insertRow(table.length);
  currentTransaction = array[i];
  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerText = currentTransaction[keys[b]];
  }
}

function searchByNumber(){
  var input = document.getElementById("searchPhoneNumber");
  var table = document.getElementById("table");
  filter = input.value.toUpperCase();
  var tr = document.getElementById("table").getElementsByTagName('tr');
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }


} 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css">

<form id="Searchform" class="Search form delay-4.9s">
  <input id="searchPhoneNumber" type="text" onkeyup="searchByNumber()">     
</form>     


<table id="table" border="1">
  <tr>
    <th>Status</th>
    <th>Amount</th>
    <th>Time</th>
  </tr>
</table>