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

Question

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

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

同样，注意搜索值将基于 Amount 和 Time[=] 中的值39=] 列，如上图所示。

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

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

以下是显示 table 的 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() 来过滤已经生成的 table?

期待您的帮助。

Answer 1

这里是使用纯 javascript 的解决方案，不包括第一行 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>