ブートストラップのテーブルに検索フィルターを追加する方法
検索フィルタリング関数をBootstrapテーブルに追加するには、検索入力ボックスを使用してテーブルを作成し、JavaScriptを使用してフィルタリングロジックを実装する必要があります。 2。入力ボックスのキーアップイベントをJavaScriptを介してバインドし、ユーザーが入力した検索用語を取得し、小文字に変換します。 3。テーブルの各行のすべてのセルを反復し、コンテンツに検索用語が含まれているかどうかを確認します（ケースは鈍感）。 4.行のセルが一致する場合、行が表示されます。それ以外の場合は非表示になります。 5.オプションの最適化には、特定の列のみの検索、アンチシェイク処理、「結果なし」プロンプトの表示などが含まれます。この方法は、純粋にjQueryまたはプラグインなしで実装されており、中小サイズのデータテーブルに適しており、最終的には軽量で効率的な検索機能を実装します。
Bootstrapのテーブルに検索フィルターを追加すると、Bootstrap JavaScriptコンポーネントが組み込まれている必要はありませんが、HTML、CSS、およびJavaScriptを少し使用して簡単に実装できます。ブートストラップはスタイリングを提供し、フィルタリングロジックは簡単なスクリプトで処理されます。
段階的にそれを行う方法は次のとおりです。
1.検索入力を備えたブートストラップテーブルを作成します
標準のブートストラップテーブルから始めて、その上に検索入力を追加します。ブートストラップのフォームクラスを使用して、入力をスタイリングします。
<！doctype html>
<html lang = "en">
<head>
<Meta charset = "utf-8" />
<Meta name = "Viewport" content = "width = device-width、initial-scale = 1.0"/>
<link href = "https://cdn.jsdelivr.net/npm/boottrap@5.3.0/dist/css/bootstrap.min.css" rel = "styleSheet"/>
<title>検索可能なテーブル</title>
</head>
<body>
<div class = "container mt-4">
<h2>検索可能なデータテーブル</h2>
<！ - 入力を検索 - >
<div class = "mb-3">
<入力class = "form-control" id = "tablesearch" type = "text" placeholder = "検索テーブル...">
</div>
<！ - ブートストラップテーブル - >
<table class = "テーブルテーブルストライプ" id = "myTable">
<head>
<tr>
<th>名前</th>
<th>位置</th>
<th> office </th>
<th> age </th>
<th>給与</th>
</tr>
</head>
<tbody>
<tr>
<td> John Doe </td>
<td>開発者</td>
<td>ニューヨーク</td>
<td> 35 </td>
<td> $ 80,000 </td>
</tr>
<tr>
<td>ジェーン・スミス</td>
<td>デザイナー</td>
<td>ロンドン</td>
<td> 29 </td>
<td> $ 75,000 </td>
</tr>
<tr>
<td> sam wilson </td>
<td>マネージャー</td>
<td>サンフランシスコ</td>
<td> 42 </td>
<td> $ 100,000 </td>
</tr>
</tbody>
</table>
</div>
<スクリプト>
//検索機能を追加します
document.getElementById（ 'tablesearch'）。addeventlistener（ 'keyup'、function（）{
let filter = this.value.tolowercase（）;
行= document.queryselectorall（ '＃mytable tbody tr'）;
rows.foreach（row => {
セル= row.getElementsByTagname（ 'td'）;
match = false;
for（i = 0; i <cells.length; i）{
if（cells [i] .textcontent.tolowercase（）。include（filter））{
match = true;
壊す;
}
}
row.style.display = match？ '' ： 'なし';
}）;
}）;
</script>
</body>
</html>2。検索の仕組み
- ID
tableSearchを備えたinputフィールドは、ユーザー入力をキャプチャします。 -
keyupイベントリスナーは、ユーザーがタイプするたびにトリガーされます。 - スクリプトは、
<tbody>の各テーブル行（<tr>）をループします。 - 各行について、セル（
<td>）に検索用語（ケース非感受性）が含まれているかどうかをチェックします。 - 一致が見つかった場合、行は表示されたままです。それ以外の場合は、
display: none。
3.オプションの強化
いくつかの小さな調整でフィルターを改善できます：
- 大きなテーブルでのパフォーマンスの入力をデバウンスします。
- 行が一致しないときに「結果なし」メッセージを追加します。
- 特定の列のみをフィルタリングします（例：検索名のみ）：
//例：最初の列のみを検索（名前）
if（cells [0] .textcontent.tolowercase（）。include（filter））{
row.style.display = '';
} それ以外 {
row.style.display = 'none';
}- ユースケース非感受性および部分的なマッチング- すでに例に含まれています。
4。ノート
- この方法は、Plain Bootstrapで動作します（jqueryまたはプラグインは必要ありません）。
- クライアント側のみです。中小サイズのテーブルに最適です。
- より大きなデータセットの場合は、AJAXを使用したサーバー側のフィルタリングを検討してください。
基本的に、入力と少しJavaScriptを追加して、ブートストラップテーブルを検索可能にします。軽量で効果的です。
以上がブートストラップのテーブルに検索フィルターを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
ブートストラップのスクロールで粘着性のサイドバーを作成する方法
Aug 22, 2025 am 09:02 AM
ブートストラップを備えたスティッキーサイドバーを作成する最も簡単な方法は、トップオフセットを備えた組み込みのスティッキートップクラスを使用することです。 1.サイドバーコンテンツラッピング要素にスティッキートップクラスを追加し、style = "top：20px;"頭との重複を避けるため。 2。親コンテナ（COL-MD-3など）に、オーバーフローなどの粘着性の行動に影響を与えるスタイルがないことを確認してください。 3.オプションで位置を設定します。カスタムCSSを介して粘着し、高さを追加します：100VHとオーバーフロー-Y：サイドバーでのスクロールをサポートする自動。 4.古いブラウザや動的コントロールと互換性がある必要がある場合は、使用できます
デフォルトのブートストラップ色を変更する方法
Aug 21, 2025 am 03:10 AM
ブートストラップのデフォルトの色を変更するには、最も推奨される方法は、SASS変数を介して再定義および再コンパイルすることです。 1.カスタムSASSファイル（custom.scssなど）を作成します。 2。ブートストラップをインポートする前に、$プライマリ：＃ff6b35; 3.オプションで、Map-Mergeにカスタム色を追加してパレットを展開します。 4. SASSコンパイラ（Dartsass、Webpackなど）を使用して、カスタマイズされたCSSを生成します。 5. SASSを使用できない場合は、CSSオーバーライド（重要であり、推奨されない）またはCSSカスタム属性（部分的にのみ有効）を使用できます。正しい方法は、最初に変更することです
SASSでブートストラップの使用方法
Aug 18, 2025 am 06:15 AM
BootstrapとSASSを使用するには、最初に環境をインストールして構成する必要があり、次に可変カスタマイズとコンピレーションを通じて効率的な開発が達成されます。 1. node.jsがインストールされていることを確認し、プロジェクトを作成し、NPMINIT-Yの初期化を実行します。 2。BootstrapとDartsass：npminstallbootstrapsassをインストールします。 3. SCSSフォルダーを作成し、新しいmain.scssを作成し、最初にブートストラップ変数（$プライマリ：＃ff6b35;など）を上書きし、@import "../ node_modules/bootstrap/scss/bootstrap"をインポートします。 4。
検索バーにブートストラップ入力グループの使用方法
Aug 27, 2025 am 02:04 AM
まず、CDNを介してブートストラップを紹介してください。 2。.input-Groupクラスを使用して、入力ボックスとボタンをラップして検索バーを作成します。 3. SVGアイコン、ボタンの色、ラベルを使用して、スタイルとアクセシビリティを最適化できます。 4.提出物を処理するためのフォームタグで入力グループをネストし、.D-Flexクラスと組み合わせて適切なレイアウトを実現し、最終的に美しく完全な検索バーを実現することをお勧めします。
ブートストラップのスクロールで固定ヘッダーを作成する方法
Aug 31, 2025 am 03:23 AM
ブートストラップを使用して固定ヘッドを作成します。ブートストラップでスクロールするときは、固定トップクラスを追加し、ボディに上のマージンを追加して、コンテンツがブロックされないようにします。特定の手順は次のとおりです。1。Navbarに固定トップクラスを追加して修正します。 2.コンテンツが非表示にならないように、体のパディングトップ値をNavbarの高さに等しく設定します。 3.オプションで、JavaScriptをスクロールするときに動的に背景効果またはシャドウエフェクトを追加します。 4.互換性がモバイルデバイスでテストされていることを確認し、ナビゲーション機能が正常であることを確認してください。これにより、シンプルで応答性の高い固定ヘッドが可能になります。
ブートストラップのキャプションでレスポンシブな画像を作成する方法
Aug 21, 2025 am 03:38 AM
ブートストラップを使用してレスポンシブタイトルの写真を作成する場合、アクセシビリティを確保するために、写真の下にタイトルを配置することをお勧めします。 IMG-Fluidを介して画像を応答し、フィギュアキャプションにグレーの小さなフォントタイトルを追加し、テキストセンターでコンテンツを集中させます。 2。タイトル（ヒーローエリアなど）をオーバーレイする必要がある場合は、位置関連を使用して画像を包み、ポジションと吸収性の要素を完全に配置し、写真の下部にあるようにボトム0START-0を設定し、BG-DarkBG-Opacity-50を組み合わせてテキストの読みやすさを改善します。 3。カードレイアウトでは、カード-Img-Topクラスを使用して制御します。
ブートストラップで石積みレイアウトを作成する方法
Aug 18, 2025 am 02:09 AM
tocreateamasonrylayoutinbootstrap5.3、usethebuilt-incsssgrid masonryutitivitions byapplyingclass = "masonry" totherowandclass = "masonry-brick" toeachchildcolumn
