並べ替え機能を備えた JavaScript 対応の HTML テーブルを作成する

Web サイトにデータを表示する場合、ユーザーがデータを閲覧しやすい機能を提供することが重要です。そのような機能の 1 つは、データを並べ替える機能です。

データの並べ替えとは、指定された値に従ってデータを昇順または降順に並べることを意味します。 JavaScript を使用して、Web サイトのクライアント側でデータの並べ替えを手動で処理できます。これは、静的な Web サイトを開発している場合、またはサーバー内でのデータの並べ替えの負担を軽減している場合に特に便利です。

このチュートリアルでは、JavaScript を使用して、シミュレートされた JSON 応答のデータを HTML テーブルに表示します。また、テーブル ヘッダーの値に基づいてテーブルを並べ替え可能にする機能も含まれます。

これが完成品です。表のヘッダーをクリックすると、それに応じて表が並べ替えられます。

1. HTML を使用したコンテンツの配置

<table> タグは、Web ページ上にデータを表示するために使用されるセマンティック HTML タグです。 <table> タグをテーブル コンテナ div 内に配置します。これにより、CSS にレスポンシブ スタイルを含めることができます。

リーリー

テーブルにはヘッダー thead とテーブルコンテンツ tbody タグが含まれます。テーブルヘッダーの各 th セルに、並べ替え機能を処理するために使用されるボタンを含めます。テーブル コンテンツのセルは、JSON 応答のデータを使用して JavaScript 経由で追加されます。

リーリー

2.CSS を使用してレスポンシブなテーブルを作成する

HTML テーブルの使用でよくある問題の 1 つは、応答性の欠如です。表には重複するセルが含まれているか、ページ全体の境界を超えている可能性があります。

これらの問題は、オーバーフロー スクロール プロパティを備えたページ幅全体のテーブル コンテナーにテーブルを配置することで解決できます。この方法では、表の幅は常にページ全体と同じだけになり、スクロール可能なオーバーフローによってセルを縮小する必要がなくなります。また、テキストの折り返しを避けるために、表のセルに最小幅属性を含めます。

これはテーブルをスクロール可能にするために必要な CSS です:

リーリー

次に、残りのスタイルを追加します。

リーリー

3. JSON データを HTML テーブルに配置します

この例では、模擬解析された JSON 応答を使用します。これは私たちのデータです:

リーリー

データを <tbody id="table-content"> タグに配置して、JavaScript で要素をターゲットにできるようにします;

リーリー

行の内容は、response.pokedata の各オブジェクトに基づきます。オブジェクト データに基づいて新しい行を作成する関数を定義しましょう:

リーリー

この関数では、Object.keys() メソッドを使用して、オブジェクト キーを配列形式で取得します。戻り値は次のとおりです:

オブジェクト キーの配列を取得したら、.map() メソッドを使用して各キーをループします。 map メソッドは、配列内の各項目に対して渡された関数を実行します。

このマッピング関数では、配列内の項目ごとに新しいセルを作成し、セルの innerHTML を対応するオブジェクト キー値に設定します。

最後に、.appendChild() メソッドを使用して、作成したセルを関数の先頭で定義された行に追加します。

これで行作成関数が完成したので、response.pokedata 配列をループし、各新しい行を tableContent 要素に追加する関数を定義します。

リーリー

getTableContent 関数をイベント リスナーに渡して、ページの読み込み後にテーブルにコンテンツを追加します。

リーリー

4. JavaScript を使用してデータを並べ替える

テーブルを作成したので、並べ替え機能を追加しましょう。私たちの HTML では、ヘッダー セルに、ID としてオブジェクト キーを持つボタンがあります。次に、これらのボタンを見つけてみましょう:

リーリー

クリックされたボタンに基づいてデータをソートし、ボタンをクリックしたときにソート方向 (昇順または降順) を切り替える機能も組み込みたいと考えています。

.sort() メソッドを使用して、response.pokedata 配列内のデータの並べ替えを処理できます。 sort メソッドは、2 つの異なるパラメーターを比較し、関数の応答に基づいて並べ替える関数を受け入れます。

<table> compareFunction(a, b) 返回值 排序顺序 > 0 排序 a 之后 b < 0 将 a 排序在 b 之前 === 0 保持 a 和 b 的原始顺序

来源：MDN

关于排序方法需要注意的另一件事是它会改变它所操作的原始数组。这意味着它改变了我们原始数组的值。

我们可以通过使用扩展语法来避免改变原始数组[...]

现在我们可以创建排序函数了。这就是我们的排序函数的逻辑：

1. 清除tableContent元素中的内容
2. 根据所选参数和方向对数据进行排序
3. 使用 getTableContent 函数将排序后的数据附加到我们的 tableContent

const sortData = (data, param, direction = "asc") => {
  tableContent.innerHTML = '';
  const sortedData =
    direction == "asc"
      ? [...data].sort(function (a, b) {
          if (a[param] < b[param]) {
            return -1;
          }
          if (a[param] > b[param]) {
            return 1;
          }
          return 0;
        })
      : [...data].sort(function (a, b) {
          if (b[param] < a[param]) {
            return -1;
          }
          if (b[param] > a[param]) {
            return 1;
          }
          return 0;
        });

  getTableContent(sortedData);
};

我们的排序函数需要三个参数：

• data：待排序的数组
• param：用于对数组进行排序的值
• direction：按升序或降序对数组进行排序。默认参数值设置为“asc”。

我们通过将innerHTML 设置为空白字符串来清除tableContent 元素中的内容。然后，我们使用 .sort() 方法和 direction 参数来确定数据应如何排序。我们反转比较函数以便按降序排序。通过这种方式使用比较函数，我们可以对数据进行排序，而不管值的类型（字符串、整数、浮点数等）

最后，我们将 sortedData 作为表内容中的新值传递。

现在，我们将排序函数传递到表格按钮的单击事件侦听器中，并处理切换排序方向。

window.addEventListener("load", () => {
  getTableContent(response.pokedata);

  [...tableButtons].map((button) => {
    button.addEventListener("click", (e) => {
        
      if (e.target.getAttribute("data-dir") == "desc") {
        sortData(response.pokedata, e.target.id, "desc");
        e.target.setAttribute("data-dir", "asc");
      } else {
        sortData(response.pokedata, e.target.id, "asc");
        e.target.setAttribute("data-dir", "desc");
      }
      
    });
  });
});

在此函数中，我们通过在按钮上设置 data-dir 属性来处理切换以确定排序方向。我们还将更新 CSS 以根据排序方向在按钮旁边显示一个图标：

th button::after {
  position: absolute;
  right: 0.5rem;
}

th button[data-dir="asc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='0, 0 8,0 4,8 8' fill='%23818688'/%3E%3C/svg%3E");
}

th button[data-dir="desc"]::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4 0,8 8,0 8' fill='%23818688'/%3E%3C/svg%3E");
}

我们不想让图标显示在所有以前单击的按钮上，因此我们将定义一个 resetButtons 函数，该函数删除任何未单击的按钮上的 data-dir 属性。

const resetButtons = (event) => {
  [...tableButtons].map((button) => {
    if (button !== event.target) {
      button.removeAttribute("data-dir");
    }
  });
};

我们会将该函数传递到按钮事件侦听器中，以便在单击新按钮时重置以前的按钮

window.addEventListener("load", () => {
  getTableContent(response.pokedata);

  [...tableButtons].map((button) => {
    button.addEventListener("click", (e) => {
        
      resetButtons(e);
      
      if (e.target.getAttribute("data-dir") == "desc") {
        sortData(response.pokedata, e.target.id, "desc");
        e.target.setAttribute("data-dir", "asc");
      } else {
        sortData(response.pokedata, e.target.id, "asc");
        e.target.setAttribute("data-dir", "desc");
      }
      
    });
  });
});

结论

这样，我们就完成了！我们仅使用普通 JavaScript 创建了一个可排序的表格！

以上が並べ替え機能を備えた JavaScript 対応の HTML テーブルを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。