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

搜尋:

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

參考資料:CodePenStackOverflow

網頁開發

16 留言

  1. filex

    請問可以使用您的JavaScript 程式碼嗎?

  2. G. T. Wang

    可以,歡迎使用。

  3. jimmy

    請問可以使用您的JavaScript 程式碼嗎?

  4. Scott

    請問可以使用您的 JavaScript 程式碼嗎?

  5. Allen

    感謝您的程式碼,十分有用!
    我另外想請教,如果表格資料筆數眾多,有什麼方法可以在資料載入完成後隱藏,搜尋時再顯示結果呢?

  6. Zhaoqi

    請問可以使用您的 JavaScript 程式碼嗎? 我會於最後一行標示出處

  7. 小廖

    這個程式好厲害喔 但真不知道它的原理怎麼用的 請問一下這樣的東西 可以用在分頁裡面嗎? 還是只能靠著假分頁的方法來用??

  8. ka ho

    請問是可以用EXCEL批量導入答案的嗎?

  9. 511

    請問可以使用您的javascript在班級圖書借書網頁嗎?謝謝~

    • G. T. Wang

      沒問題,歡迎大家使用。

  10. DASE

    請問如果尋搜出來的值仍然很多,有辦法再弄第二次搜尋嗎?
    例如,第一次搜 0928 跑出 3 個值
    再做一次關鍵字 8 就只會剩下 1 個這樣

    以上感謝

  11. Ken

    請問若要”行”搜尋要怎麼改呢?
    也就是上面的例子我只要顯示”電話”那行,或是”姓名”那行。

  12. Ken

    請問有搜尋的方法嗎? 搜尋後,僅顯示該列出來。
    E.g. 搜尋”電話”,就只會顯示電話那一列。

Comments are Closed