這裡介紹如何在網頁中加入簡單的 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 程式碼,加上靜態網頁表格的資料量不大,所以它的執行效能非常好,對於普通網頁來說非常實用。更實際的範例參考民國、西元年份與歲次對照表範例

搜尋:

姓名 電話
令狐沖 0928-123456
岳不群 0928-654321
岳靈珊 0928-888999
獨孤求敗 0975-938374

參考資料:CodePenStackOverflow