jqueryクエリテーブルの中央値

Web 開発では、テーブルは一般的かつ重要な要素であり、テーブル データをクエリおよびフィルタする方法は共通の要件です。 jQuery は、豊富なセレクターと DOM 操作メソッドを提供する非常に強力な JavaScript ライブラリです。この記事では、jQuery を使用してテーブル内の値をクエリする方法を紹介します。

1. テーブル内のデータを取得する

テーブル内の値をクエリするには、まずテーブル内のデータを取得する必要があります。 jQueryを使用すると、テーブルから簡単にデータを取得できます。

HTML コードは次のとおりです:

  

    

      
Name
      
Age
      
Address
    
  
  

    

      
John
      
25
      
London
    
    

      
Jane
      
30
      
New York
    
    

      
Bob
      
20
      
Paris
    
  

jQuery を使用してテーブル データを取得するコードは次のとおりです:

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

コードの解析: 最初に空の配列 tableData を定義し、次に、 each() メソッドを使用してテーブル内の各行 (tr) を走査し、 find() メソッドを使用して行内の各セル (td) を走査し、セル内のテキスト コンテンツを rowData 配列に追加します。最後に、rowData 配列が tableData 配列に追加され、各サブ配列がテーブル内のデータの行を表す 2 次元配列が得られます。

2. テーブル内のデータのクエリ

テーブル内のデータのクエリには、通常、行ごとのクエリと列ごとのクエリという 2 つの側面が含まれます。これら 2 つのクエリ方法については、以下で詳しく紹介します。

2.1 行によるクエリ

行によるクエリとは、テーブル内の特定の列の値に基づいて行データをクエリすることを意味します。たとえば、上の表では、「ロンドン」に住んでいるすべての人々に関する情報をクエリしたいとします。

HTML コードは次のとおりです:

Search

jQuery を使用して行ごとにクエリを実行するコードは次のとおりです:

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

コードの解析: まず、使用されているテキスト ボックスの値を取得します。検索して変換するため、後の比較を容易にするために小文字で表記されています。次に、テーブルの各行を調べてから、各セルを調べて、セルの値に検索テキスト ボックスのキーワードが含まれているかどうかを確認します。見つかった場合は行を表示し、見つからない場合は行を非表示にします。

2.2 列によるクエリ

列によるクエリとは、テーブル内の行の値に基づいて列データをクエリすることを意味します。たとえば、上の表では、25 歳以上のすべての人の情報をクエリしたいとします。

HTML コードは上記と同じです。

jQuery を使用して列ごとにクエリを実行するコードは次のとおりです。

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

コードの解析: まず、クエリ対象の列のインデックス (columnIndex) を 1 (年齢列) として定義します。次に、検索テキスト ボックスの値を取得し、それを小文字に変換します。テーブル内の各行を走査し、 eq() メソッドを通じて各行の対応する列の値を取得し、比較のために parseInt() メソッドを通じてそれを整数型に変換します。条件が満たされる場合、データの行は表示され、そうでない場合、データの行は非表示になります。

3. 概要

この記事では、行によるクエリや列によるクエリなど、テーブル内のデータをクエリするための jQuery の使用方法を紹介します。 jQuery のセレクターと DOM 操作メソッドを使用して、テーブル データのクエリとフィルターを簡単に行うことができます。テーブル データの量が多い場合、クエリのパフォーマンスに影響が出る可能性があるため、クエリの効率を向上させるために適切なソリューションを選択する必要があることに注意してください。

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