如何为动态生成的表编写实时搜索功能？

Question

我有一个脚本，可以根据存储在数组中的值生成动态表。我想写一个实时搜索函数searchByNumber()。如何根据 Amount 和 Time 列中的值编写实时 search 函数来动态过滤现有表？

在下面找到一张图片来说明生成的表格的样子：

再次注意，搜索值将基于 Amount 和 Time 列中的值，如上图所示。

在下面找到显示数组配置的脚本，以及如何生成动态表：

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]];
  }
}

以下是显示表格的 HTML 代码，还要注意搜索字段：

<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>

如何编写实时搜索函数searchByNumber()来过滤已经生成的表格？

期待您的帮助。

Answer 1

这是使用纯 javascript 的解决方案，不包括作为标题的第一行。

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>