テーブル内の特定の列の内容を検索およびフィルターする手順の詳細な説明
今回は、テーブル内の特定の列のコンテンツを検索およびフィルタリングする手順について詳しく説明します。テーブル内の特定のコンテンツの列を検索およびフィルタリングするための注意事項は何ですか。ケース、見てみましょう。
場合によっては、データベースからデータを読み取り、テーブルに表示することがあります。このとき、検索ボックスにキーワードを入力し、テーブルの内容をリアルタイムでフィルタリングするという新しい要件が発生します。 データベースクエリをすぐにトリガーしてから表示を呼び戻すと、表示が遅くなり、サーバーが遅くなり、ユーザーエクスペリエンスが低下します。このとき、テーブルの特定の列の即時フィルタリングを実行する純粋なJS操作がある場合、これにより、検索速度が向上するだけでなく、サーバーリソースを占有する必要もなく、ユーザーは自然に満足できます。 実装は次のとおりです。最初にレンダリングを確認します。開始状態:
オンライン HTML/JS/CSS 実行ツールhttp://tools.jb51.net/code/HtmlJsRun を使用します。は以下のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> JS搜索筛选table列</title>
</head>
<script type="text/javascript">
function onSearch(obj){//js函数开始
setTimeout(function(){//因为是即时查询，需要用setTimeout进行延迟，让值写入到input内，再读取
var storeId = document.getElementById('store');//获取table的id标识
var rowsLength = storeId.rows.length;//表格总共有多少行
var key = obj.value;//获取输入框的值
var searchCol = 0;//要搜索的哪一列，这里是第一列，从0开始数起
for(var i=1;i<rowsLength;i++){//按表的行数进行循环，本例第一行是标题，所以i=1，从第二行开始筛选（从0数起）
var searchText = storeId.rows[i].cells[searchCol].innerHTML;//取得table行，列的值
if(searchText.match(key)){//用match函数进行筛选，如果input的值，即变量 key的值为空，返回的是ture，
storeId.rows[i].style.display='';//显示行操作，
}else{
storeId.rows[i].style.display='none';//隐藏行操作
}
}
},200);//200为延时时间
}
</script>
<body>
<p > <input name="key" type="text" id="key" onkeydown="onSearch(this)" value="" /></p>
<table width="200" border="1" id="store"><!-- id与函数的getId一致 -->
<tr bgcolor="#CCCCCC">
<td>name</td>
<td> </td>
<td> </td>
</tr>
<td>good</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>better</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>best</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>bad</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worse</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>worst</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html> vueでの$emitと$on親子兄弟コンポーネント操作の詳細な説明
以上がテーブル内の特定の列の内容を検索およびフィルターする手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7759
15
1644
14
1399
52
1293
25
1234
29
Windows 11 の検索からニュースやトレンド コンテンツを削除する方法
Oct 16, 2023 pm 08:13 PM
Windows 11 で検索フィールドをクリックすると、検索インターフェイスが自動的に開きます。左側に最近のプログラムのリストが表示され、右側に Web コンテンツが表示されます。 Microsoft はそこにニュースやトレンドのコンテンツを表示します。今日のチェックでは、Bing の新しい DALL-E3 画像生成機能、「Chat Dragons with Bing」オファー、ドラゴンに関する詳細情報、Web セクションのトップ ニュース、ゲームの推奨事項、およびトレンド検索セクションを宣伝しています。項目のリスト全体は、コンピューター上でのアクティビティとは無関係です。一部のユーザーはニュースを表示できることに感謝しているかもしれませんが、これらはすべて他の場所で豊富に利用できます。直接的または間接的にそれをプロモーションまたは広告として分類する人もいます。 Microsoft はインターフェイスを使用して自社のコンテンツを宣伝しています。
Xianyu でユーザーを検索する方法
Feb 24, 2024 am 11:25 AM
Xianyu はどのようにしてユーザーを検索しますか?ソフトウェア Xianyu では、ソフトウェア内で通信したいユーザーを直接見つけることができます。しかし、ユーザーを検索する方法がわかりません。検索後にユーザー間で表示するだけです。次は編集部からユーザーへの検索方法についてご紹介しますので、興味のある方はぜひご覧ください！ Xianyu でユーザーを検索するには? 回答: 検索されたユーザーの詳細を表示します はじめに: 1. ソフトウェアを入力し、検索ボックスをクリックします。 2. ユーザー名を入力し、「検索」をクリックします。 3. 検索ボックスの下の[ユーザー]を選択して、該当するユーザーを検索します。
Baidu の高度な検索の使用方法
Feb 22, 2024 am 11:09 AM
Baidu 詳細検索の使用方法 Baidu 検索エンジンは現在中国で最も一般的に使用されている検索エンジンの 1 つであり、豊富な検索機能を提供しており、その 1 つが詳細検索です。高度な検索は、ユーザーが必要な情報をより正確に検索し、検索効率を向上させるのに役立ちます。では、Baidu の高度な検索を使用するにはどうすればよいでしょうか?最初のステップは、Baidu 検索エンジンのホームページを開くことです。まず、Baidu の公式 Web サイト (www.baidu.com) を開く必要があります。ここが百度検索の入り口です。 2 番目のステップでは、「詳細検索」ボタンをクリックします。 Baidu の検索ボックスの右側に、
WPS テーブルで検索しているデータが見つかりません。検索オプションの場所を確認してください。
Mar 19, 2024 pm 10:13 PM
インテリジェンスが支配する時代では、オフィス ソフトウェアも普及し、Wps フォームはその柔軟性により大多数のオフィス ワーカーに採用されています。仕事では、単純な帳票作成や文字入力だけでなく、実際の業務を遂行するためにより高度な操作スキルを習得することが求められており、データ付きの帳票や帳票を利用することで、より便利で明確、正確なものとなります。今日の教訓は、「WPS テーブルでは、検索しているデータが見つかりません。検索オプションの場所を確認してください。なぜですか?」です。 1. まず Excel テーブルを選択し、ダブルクリックして開きます。次に、このインターフェイスですべてのセルを選択します。 2. 次に、このインターフェースで、上部ツールバーの「ファイル」の「編集」オプションをクリックします。 3. 次に、このインターフェースで「」をクリックします。
Javaで特定のファイル拡張子を持つディレクトリを検索するにはどうすればよいですか?
Aug 31, 2023 am 08:13 AM
次の例では、拡張子に基づいてディレクトリ内のファイルを出力します。例 importjava.io.IOException;importjava.nio.file.Files;importjava.nio.file.Path;importjava.nio.file.Paths;importjava.util.stream。ストリーム; publicclassDemo{ publicstaticvoidmain(String[]args)throwsIOException{ 
モバイルタオバオで店舗を探す方法 店舗名の検索方法
Mar 13, 2024 am 11:00 AM
タオバオのモバイルアプリには良い商品がたくさんあります。いつでもどこでも購入でき、すべて正規品です。各商品の価格は明確です。複雑な操作は一切なく、より便利にお買い物をお楽しみいただけます。自由に検索して購入できます さまざまなカテゴリの商品セクションがすべてオープンしています 個人の配送先住所と連絡先番号を追加すると、運送会社から連絡があり、最新の物流動向をリアルタイムで確認できます初めて利用する方、商品の検索方法が分からない方でも、もちろん検索バーにキーワードを入力するだけですべての商品が表示されますので、お買い物はもうやめられません。モバイルタオバオユーザーが店舗名を検索するための詳細なオンライン方法を提供します。 1.まず携帯電話でタオバオアプリを開きます。
PHP 関数を使用してデータを検索およびフィルターするにはどうすればよいですか?
Jul 24, 2023 am 08:01 AM
PHP 関数を使用してデータを検索およびフィルターするにはどうすればよいですか? PHP を使用した開発プロセスでは、データの検索やフィルター処理が必要になることがよくあります。 PHP は、これらの操作の実現に役立つ関数とメソッドを豊富に提供します。この記事では、データを効率的に検索およびフィルタリングするために役立つ、一般的に使用される PHP 関数とテクニックをいくつか紹介します。文字列検索 PHP で一般的に使用される文字列検索関数は、strpos() と strstr() です。 strpos() は、文字列内の特定の部分文字列の位置を見つけるために使用されます。存在する場合は、それを返します。
C++ でハッシュ検索アルゴリズムを使用する方法
Sep 19, 2023 pm 02:49 PM
C++ でのハッシュ検索アルゴリズムの使用方法 ハッシュ検索アルゴリズムは、効率的な検索および保存テクノロジです。ハッシュ関数を通じてキーワードを固定長のインデックスに変換し、このインデックスをデータ構造の検索で使用します。 C++ では、標準ライブラリのハッシュ コンテナーとハッシュ関数を使用して、ハッシュ検索アルゴリズムを実装できます。この記事では、C++ でハッシュ検索アルゴリズムを使用する方法を紹介し、具体的なコード例を示します。ヘッダー ファイルと名前空間の紹介 まず、C++ でハッシュ検索アルゴリズムを使用する前に、
