HTML、CSS、およびJavaScriptを使用してフィルタ機能を持つ応答形式を構築する方法

25028 ワード
webdev css javascript tutorial テキストリンク
テーブル内のデータのリストを表示するほとんどのサイトは、一般的に実装されているフィルタ機能を持っています.これは、フォームの入力に入力するテキストに基づいて、ユーザーフィルタ関連の項目に役立ちます.
この簡単なチュートリアルでは、以下のように応答できるテーブルを作成します.

このテーブルには開発者の一覧が含まれます.各行には、名前、年齢、およびプログラミング言語が含まれます.ユーザーが入力フィールドに入力すると、テーブルがフィルタリングされ、入力された値と一致する行が返されます.
これを構築する過程で、JavaScriptでDOMアクセス/操作と同様にCSSプロパティについて学びます.
CodePenからサンプルコードを取得できます.

始める
プロジェクトフォルダに3つの簡単なファイルを作成する必要があります.インデックスです.HTMLマークアップ、スタイルのためのHTML.スタイリング用のCSSとインデックス.スクリプトのためのJS.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Filterable Table</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <script src="index.js" type="text/javascript"></script>
</body>
</html>
上記のHTMLで行ったように、スタイルシートとスクリプトファイルをリンクしてください.

HTMLマークアップ
bodyタグ内に次のマークアップを追加します
<div class="app">
    <input type="text" id="searchInput" placeholder="filter developer...">

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Language</th>
        </tr>
      </thead>
      <tbody id="names">
        <tr>
          <td>Kingsley</td>
          <td>32</td>
          <td>JavaScript</td>
        </tr>
        <tr>
          <td>Samuel</td>
          <td>22</td>
          <td>Python</td>
        </tr>
        <tr>
          <td>Joyce</td>
          <td>28</td>
          <td>Ruby</td>
        </tr>
        <tr>
          <td>Jake</td>
          <td>29</td>
          <td>Python</td>
        </tr>
        <tr>
          <td>Daniel</td>
          <td>40</td>
          <td>JavaScript</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>21</td>
          <td>C</td>
        </tr>
        <tr>
          <td>David</td>
          <td>26</td>
          <td>JavaScript</td>
        </tr>
        <tr>
          <td>Kelly</td>
          <td>31</td>
          <td>React</td>
        </tr>
        <tr>
          <td>Cleo</td>
          <td>43</td>
          <td>Java</td>
        </tr>
        <tr>
          <td>Peter</td>
          <td>19</td>
          <td>Vue</td>
        </tr>
        <tr>
          <td>George</td>
          <td>59</td>
          <td>Cobol</td>
        </tr>
        <tr>
          <td>James</td>
          <td>29</td>
          <td>JavaScript</td>
        </tr>
        <tr>
          <td>Ethan</td>
          <td>22</td>
          <td>PHP</td>
        </tr>
        <tr>
          <td>Sandra</td>
          <td>29</td>
          <td>R</td>
        </tr>
        <tr>
          <td>Pires</td>
          <td>34</td>
          <td>React Native</td>
        </tr>
        <tr>
          <td>Martha</td>
          <td>30</td>
          <td>React</td>
        </tr>
      </tbody>
    </table>
  </div>
最初の要素はフォーム入力です.これを使用してユーザからデータを収集します.
それからテーブルがあります.テーブルは、ヘッド(thead)とボディ(tbody)から成ります.頭はデータの一つの行(tr)を持ちます.本体には16行のデータがあり、それぞれが名前、年齢、プログラミング言語から成ります.
これらの要素を親divタグにラップします.後にCSSで見るようにアライメントを手伝ってくれます.
ファイルを保存し、Webブラウザ上でアプリケーションを開きます.


ハウツーとスタイル
我々は今、テーブルにスタイリングを適用します.まず、このような基本スタイルを設定します.
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap");

/* Set no margin and padding around body. Set height to take up entire screen height. Align everything to the center, both horizontally and vertically */

body {
  margin: 0;
  height: 100vh;
  padding: 0;
  font-family: "lato", sans-seriff;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

/* Remove border and outline around input. Set width to take up the entire width of parent and set margin on bottom */

#searchInput {
  border: none;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
}

/* When input gains focus, add a blue border below it */

#searchInput:focus {
  border-bottom: 2px solid #4575b6;
}
テーブルは、センターに整列されます.

テーブルを良くするには、次のスタイル規則を使用できます.
/* Sets width of table container (div) to 80% of browser window's width and the height to 100% of window's height. `vh` and `vw` makes the table responsive because it scales along with screen size. Also set margin of 20px to top and bottom */

.app {
  width: 80vw;
  height: 100vh;
  margin: 20px 0;
}

/* Collapse all borders separating each cell. Table takes up entire width of .app. Set gray shadow around table */
table {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 5px 7px gray;
}

/* Set shadow on just the table head */
thead {
  box-shadow: 0px 0px 10px gray;
}

/* Add some space around table heading. Align text to right and transform to uppercase */

th {
  padding: 1rem 3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: left;
}

/* Add padding on each cell */
td {
  padding: 0.5rem 3rem;
  font-size: 1rem;
}

/* Create alternating color(blue) across the rows. Set blue on all even ones (2, 4, 6 ...) */

tr:nth-child(even) {
  background-color: #dee8f5;
}
現在、我々のテーブルは少しよく見えます、そして、それは敏感です.


JavaScriptでフィルタ機能を実装する方法
この時点でテーブルはかなり静的です.JavaScriptを使用すると、フォームフィールドにユーザーの型に基づいて名前をフィルター処理するロジックを実装します.
スクリプトファイルで、filterという関数を定義します.最初の3行では、ユーザの入力値にアクセスし、テーブル本体<tbody>を変数名に渡し、最終的に<tr>の内部からすべてのテーブル行<tbody>にアクセスする.
また、すべてが一貫していることを確認するために値を大文字に変更します(ユーザは' j 'の代わりに' j 'を入力するかもしれません).
  /* This function will check for the user's input and based on that will either hide or display a particular row */

  function filter() {
    // Access text value and elements from the DOM 
    let value = document.getElementById("searchInput").value.toUpperCase();
    let names = document.getElementById("names");
    let rows = names.getElementsByTagName("tr");

   // Code continues
次に、各配列をループします.行ごとに、最後の列(言語列)にアクセスし、そのテキストコンテンツ(実際の値)を取得します.
for (i = 0; i < rows.length; i++) {
    let column = rows[i].getElementsByTagName("td")[2];
    let language = column.textContent;

    rows[i].style.display =
      language.toUpperCase().indexOf(value) > -1 ? "" : "none";
  }
}

document.getElementById("searchInput").addEventListener("keyup", filter);

テーブル行をループする
テーブルの実際の文字列値が入力からユーザーの値のいずれかを含んでいる場合、その行が表示されます.そうでなければ、我々はそれを隠します.三項演算子を用いて条件文を短縮した.
最後に、イベントリスナーを入力に追加します.キーが解放されるたびに、フィルタは呼び出されます.
以下にそのための完全なコードを示します:
function filter() {
  let value = document.getElementById("searchInput").value.toUpperCase();
  var names = document.getElementById("names");
  var rows = names.getElementsByTagName("tr");

  for (i = 0; i < rows.length; i++) {
    let column = rows[i].getElementsByTagName("td")[2];
    let language = column.textContent;

    rows[i].style.display =
      language.toUpperCase().indexOf(value) > -1 ? "" : "none";
  }
}

document.getElementById("searchInput").addEventListener("keyup", filter);
あなたのテーブルは最後に次のようになります.


ラッピング
ちょうどHTML、CSS、およびJavaScriptを使用すると、高度な機能を持ついくつかの本当にスタイリッシュな要素を作成することができます.
私は、あなたがこれからものまたは2を学んだことを望みます.もう一度、あなたはCodepenのコードをチェックアウトし、好きなように微調整することができます.
フォローありがとうございます.

P/S: If you like resourceful posts like this, consider subscribing to my newsletter

Java/selenium(4)へスクロール
RecyclerViewのItemDecorationでStickyHeader効果を実現(メモ)