CSS ホバーを使用して表の行のハイライトを強化する

HTML テーブルにおける CSS ホバーの課題を克服する

HTML テーブルの操作は、特にテーブルをインタラクティブにしようとする場合、パズルのように感じることがあります。 CSS ホバー効果を使用して行を動的に強調表示することは一般的な要件ですが、行が複数のセルにまたがる場合は扱いが難しくなることがあります。 🤔

グループとユーザーを含むサーバー データを表すテーブルがあると想像してください。単純な行の場合、ホバー効果が期待どおりに機能する可能性があります。ただし、テーブル内の ServerX のように、行が複数のセルにまたがる場合、動作が一貫性を持たなくなる可能性があります。ホバー時に行グループ全体を視覚的に区別できるようにすることが目標である場合、これはイライラする可能性があります。

最近のプロジェクトの 1 つで、同様の問題に遭遇しました。テーブルは、ServerA のような単純なエントリでは完璧に動作しましたが、ServerX に到達すると、ホバー効果は部分的にしか機能しませんでした。 ServerC のような行では、まったく異なる背景色が必要になるため、さらに課題が増えました。 CSS が中途半端な解決策で私をからかっているように感じました。 😅

このガイドでは、必要に応じて CSS と JavaScript を使用して、これらの問題を解決する方法を説明します。 (PowerShell で行ったように) テーブルを動的に生成する場合でも、静的な HTML で作業する場合でも、これらのヒントは、一貫性のある視覚的に魅力的なテーブル インタラクションを作成するのに役立ちます。

行強調表示のスクリプトを理解する

最初のスクリプトは純粋な CSS を利用して、テーブルの行にホバー効果を作成します。これは、 :ホバー ユーザーが要素の上にマウスを移動したときにスタイルを適用する疑似クラス。これを行に適用すると、背景色を動的に変更できます。この方法は軽量でシンプルですが、静的構造に限定されます。たとえば、ServerX のような複数行のスパンでは、マークアップ内で明示的にグループ化されていない限り、CSS だけでは関連する行を強調表示できません。これは、単純なケースでは基本的ですが効果的な選択肢になります。 😊

2 番目のスクリプトは、バニラ JavaScript を使用して行を動的にグループ化し、強調表示します。付けることで イベントリスナー マウスオーバー イベントとマウスアウト イベントの場合、スクリプトは次のようなカスタム属性を使用して関連する行を識別します。 データグループ。ユーザーが行の上にマウスを移動すると、同じグループを持つすべての行が対象となり、スタイルが設定されます。このアプローチにより柔軟性がもたらされ、スクリプトがより複雑なシナリオに適応できるようになります。たとえば、ServerX 行と ServerC 行をグループ化して、一貫した強調表示を行うことができます。この方法では、カスタマイズとパフォーマンスのバランスが取れます。

3 番目のスクリプトは以下を統合します。 jQuery、簡潔な構文により行の強調表示のプロセスが簡素化されます。ホバー関数を使用して、マウスオーバー イベントとマウスアウト イベントの両方をテーブル行にバインドします。スクリプトは、グループ化された行内のセルにスタイルを動的に適用します。 。探す（） 方法。 jQuery の簡潔な構文により必要なコードの量が削減されるため、これは DOM が複雑なプロジェクトで特に役立ちます。 PowerShell スクリプトのように、テーブルが動的に生成されるシナリオでは、このアプローチは効率的であり、実装も簡単です。 🚀

これらの各ソリューションは、さまざまなレベルの複雑さに対処するように設計されています。 CSS は静的なデザインに適していますが、JavaScript と jQuery はより高度なニーズに対応する動的でスケーラブルなソリューションを提供します。テーブル構造が頻繁に変更される場合、または動的に生成される場合には、JavaScript および jQuery ソリューションが最適です。これらは、さまざまなグループ化ルールに適応する柔軟性を提供し、ServerX や ServerC などの行が意図したとおりに動作することを保証します。この多用途性により、複雑さに関係なく、テーブルがインタラクティブで視覚的に一貫した状態を保つことができます。

<style>
  table {
    border-collapse: collapse;
    width: 70%;
    margin: auto;
    text-align: left;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
  }
  .highlight-group:hover td {
    background-color: coral;
  }
</style>
<table>
  <tr class="highlight-group">
    <td rowspan="1">ServerA</td>
    <td>Acct A1</td>
    <td>9 users</td>
  </tr>
</table>

<script>
  document.querySelectorAll('table tr').forEach(row => {
    row.addEventListener('mouseover', () => {
      const group = row.getAttribute('data-group');
      document.querySelectorAll(`tr[data-group="${group}"] td`).forEach(cell => {
        cell.style.backgroundColor = 'coral';
      });
    });
    row.addEventListener('mouseout', () => {
      const group = row.getAttribute('data-group');
      document.querySelectorAll(`tr[data-group="${group}"] td`).forEach(cell => {
        cell.style.backgroundColor = '';
      });
    });
  });
</script>
<table>
  <tr data-group="ServerA">
    <td rowspan="1">ServerA</td>
    <td>Acct A1</td>
    <td>9 users</td>
  </tr>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('table tr').hover(function() {
      let group = $(this).data('group');
      $(`tr[data-group="${group}"]`).find('td').css('background-color', 'coral');
    }, function() {
      let group = $(this).data('group');
      $(`tr[data-group="${group}"]`).find('td').css('background-color', '');
    });
  });
</script>
<table>
  <tr data-group="ServerA">
    <td rowspan="1">ServerA</td>
    <td>Acct A1</td>
    <td>9 users</td>
  </tr>
</table>

テーブル ホバー機能の拡張: 高度なテクニック

動的でインタラクティブなテーブルを作成する場合、正確なホバー効果を実現するには、多くの場合、高度な機能を掘り下げる必要があります。そのようなテクニックの 1 つは、次のようなカスタム属性を使用することです。 data-* 属性 行を論理的にグループ化します。これにより、特定のサーバー グループに関連するすべての行を強調表示するなど、より微妙な動作が可能になります。たとえば、ServerX にホバー効果を適用すると、「Acct X1」行と「Acct X2」行の両方を強調表示でき、よりクリーンなユーザー エクスペリエンスを提供できます。これらの属性を使用すると、テーブルが動的になり、管理が容易になります。

考慮すべきもう 1 つの側面は、ブラウザーの互換性と応答性です。基本的な CSS ホバー効果は普遍的に機能しますが、JavaScript を追加すると、より堅牢なソリューションが保証されます。これは、PowerShell などのスクリプトを通じて作成されたテーブルなど、動的に生成されるテーブルの場合に特に重要です。次のようなイベントをプログラムで処理する JavaScript の機能 マウスオーバー そして マウスアウト、必要な機能がすべての環境で一貫していることを保証します。この方法では、JavaScript がサポートされていない場合でも正常に機能を低下させることができます。 🌐

より高度なユースケースでは、jQuery や Bootstrap などのフレームワークを組み込むことで開発を効率化できます。 jQuery などのライブラリによりコードの複雑さが軽減され、大規模なデータセットでのインタラクションの管理が容易になります。たとえば、次のように使用します。 .hover() jQuery では、特に複雑な行グループ化を伴うシナリオでのイベント処理が簡素化されます。これらのライブラリは、高度にインタラクティブなテーブルを作成するためのさまざまな事前構築ツールを提供し、視覚的に魅力的でユーザーフレンドリーなものを保証します。これらのアプローチを組み合わせることで、機能的かつ視覚的に魅力的なテーブルを構築できます。 🚀