JavaScript 實作簡易網頁表格資料搜尋與篩選功能

這裡介紹如何在網頁中加入簡單的 JavaScript 程式碼，讓表格擁有基本的資料搜尋與篩選功能。

在設計網頁時，若遇到表格資料比較多的情況，可以適時加入輕量化的 JavaScript 程式碼，讓表格具有簡易的資料搜尋與篩選功能，讓使用者更方便尋找資料，而這種做法不會使用到 jQuery 等大型函式庫，對於整個網頁的效能幾乎沒有影響。

HTML 原始碼

首先在表格上方加入一個讓使用者輸入搜尋關鍵字的 <input> 欄位，並且設定其 class 屬性為 light-table-filter，隨後我們會在 JavaScript 中使用這個屬性抓出此標籤。

接著設定<input> 的 data-table 屬性為 order-table ，我們將透過這個屬性來指定要搜尋與篩選的表格。接著將含有資料的靜態表格修改一下，將其 class 屬性也設定為 order-table（與 <input> 的 data-table 屬性對應）。

搜尋：<input type="search" class="light-table-filter" data-table="order-table" placeholder="請輸入關鍵字">

<table class="order-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>電話</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>令狐沖</td>
      <td>0928-123456</td>
    </tr>
    <tr>
      <td>岳不群</td>
      <td>0928-654321</td>
    </tr>
    <tr>
      <td>岳靈珊</td>
      <td>0928-888999</td>
    </tr>
    <tr>
      <td>獨孤求敗</td>
      <td>0975-938374</td>
    </tr>
  </tbody>
</table>

這裡的網頁表格請按照標準的寫法，將標頭放在 <thead> 標籤中，而內容則是放在 <tbody> 標籤中，這樣後續的 JavaScript 才會正常運作。

JavaScript 程式碼

修改好 HTML 原始法之後，在網頁中加入以下 JavaScript 程式碼（可以放在外部的 .js 檔案中再引入，或是直接放在 <script> 與 </script> 標籤中）：

(function(document) {
  'use strict';

  // 建立 LightTableFilter
  var LightTableFilter = (function(Arr) {

    var _input;

    // 資料輸入事件處理函數
    function _onInputEvent(e) {
      _input = e.target;
      var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
      Arr.forEach.call(tables, function(table) {
        Arr.forEach.call(table.tBodies, function(tbody) {
          Arr.forEach.call(tbody.rows, _filter);
        });
      });
    }

    // 資料篩選函數，顯示包含關鍵字的列，其餘隱藏
    function _filter(row) {
      var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    }

    return {
      // 初始化函數
      init: function() {
        var inputs = document.getElementsByClassName('light-table-filter');
        Arr.forEach.call(inputs, function(input) {
          input.oninput = _onInputEvent;
        });
      }
    };
  })(Array.prototype);

  // 網頁載入完成後，啟動 LightTableFilter
  document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
      LightTableFilter.init();
    }
  });

})(document);

在實際應用時，建議可將 JavaScript 程式碼壓縮（可用 JSCompress 等工具）之後，再貼在網頁上，可減少網頁的資料量。

執行結果

這是實際執行的樣子，我們可以在搜尋欄位輸入一些關鍵字，表格中就會即時呈現搜尋的結果，由於我們只用到非常簡單的 JavaScript 程式碼，加上靜態網頁表格的資料量不大，所以它的執行效能非常好，對於普通網頁來說非常實用。更實際的範例參考民國、西元年份與歲次對照表範例。

搜尋：

參考資料：CodePen、StackOverflow