jqueryはテーブルの内容を検索しますか?

Web アプリケーションを作成する場合、テーブルはデータを表示する一般的な方法です。多くの場合、これらのテーブルには大量のデータが含まれているため、ユーザーはニーズを満たす特定のデータをフィルターで除外するために検索する必要があります。このために、jQuery を使用してテーブル検索機能を実装できます。

まず、HTML でテーブルを作成し、それにヘッダーとデータ行を追加する必要があります。

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

次に、検索関数を実装するための jQuery コードを記述する必要があります。まず、テーブルの内容を配列に変換し、変数に保存します。

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

このコードでは、jQuery の each メソッドを使用してテーブルの各行を反復処理し、それを含む An オブジェクトに変換します。 3つの属性（名前、年齢、性別）。このうち、各セルのインデックス値を取得するために eq メソッドを使用し、セル内のテキストの内容を取得するために text メソッドを使用しました。

次に、ユーザーが入力したキーワードに基づいてテーブル データをフィルターする検索関数を作成できます。この関数では、配列内の特定の要素を検索するために使用できる jQuery の grep メソッドを使用しました。

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

このコードでは、toLowerCase メソッドを使用してキーワードとテーブル データを小文字に変換しました。 、大文字と小文字を区別しない検索が可能になります。次に、indexOf メソッドを使用して、キーワードを含むテーブル データを検索します。

最後に、ユーザーがキーワードを入力してテーブルの内容を更新したときに検索関数を呼び出すようにイベント ハンドラーをバインドする必要があります。

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

このコードでは、keyup イベントを使用してリッスンします。ユーザーが入力してテキスト ボックス内のキーワードを取得します。次に、検索関数を呼び出してフィルター処理されたテーブル データを取得し、それを HTML コードに変換してテーブルのコンテンツを更新します。

要約すると、jQuery を使用して、キーワードベースのテーブル検索機能を実装するコードを作成しました。このようにして、ユーザーは特定のデータを簡単に見つけることができ、システムの使いやすさとユーザー エクスペリエンスが向上します。

以上がjqueryはテーブルの内容を検索しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。