javascript - 同じテーブルの別の行にカーソルを合わせたときにテーブル行の背景色を変更する

Question

これは私の最初の投稿であり、私は熟練した HTML/CSS/JavaScript プログラマーではないので、十分に明確に表現していない場合はご容赦ください。言葉が多すぎたら申し訳ありません!

表形式のコンテンツに従来の HTML テーブルを使用していますが、現在ホバリングしている行とは異なる行の背景色を変更できるようにしたいと考えています。

この理由は、「サブテーブル」に分割された多くのテーブルがあり、それぞれに独自のヘッダーがあり、その下に 1 つ以上の行があるためです。ただし、これらのサブテーブルはすべて同じスタイルで、テーブルとしてコーディングされていません。代わりに、異なるクラスを使用してスタイルを設定するだけです (これは主に、ヘッダーを含む各行が非常に多く、非常に小さいためです)。

私がやりたいことは、サブテーブルのいずれかをホバーすると、そのヘッダーと現在指している行の両方が背景色を変更することです (後者は CSS で簡単に実現できます)。オンラインで見つかった JavaScript のおかげで、私はこれを達成することができました -おそらくこれをよりよく説明しているサンプル コード を参照してください。以下のコードも参照してください - ただし、各サブヘッダーに一意の ID が必要です。(各サブテーブルは個別の tbody を使用することに注意してください。onMouseoverイベントが代わりに各行に適用された場合、ある行から別の行にホバリングすると、サブヘッダーの色がちらつく/オン/オフになります-これは CSS では決して発生しませんが、 JavaScript を使用して - もちろん、さらに多くのコードを作成します。)

各サブヘッダーに一意の ID を割り当てる代わりに、代わりにクラスを使用するソリューションが必要です。各サブテーブルが同じものを使用していることを確認します (もちろん、クラスを割り当てtbodyます)。これで難しいのは、現在のサブテーブルのヘッダーだけが影響を受け、すべてが同時に影響を受けないようにすることだと思います。各サブテーブルが実際に個別のテーブルとしてコード化されているソリューションを作成する方が簡単な場合 (セマンティックの観点からも優れている可能性があります)、そうしてください。もちろん、JavaScript がonMouseoveretc イベントを単独で適用した場合は、それを各サブテーブルのインライン コードに入れる必要がなくなります。ボタンなどに対してこれを実行できることがわかったので、これが可能だとします。

私は jQuery を使用したことがないので、純粋な JavaScript ソリューションを使用することをお勧めします。

サンプルコードについては、私のフィドルを参照してください

ご意見をお寄せいただきありがとうございます。

JavaScript:

function changeTo(myId) { document.getElementById(myId).className='sub-header-highlight'; }
function changeBack(myId) { document.getElementById(myId).className='sub-header'; }

CSS:

thead { color: #FFF; background: #000; }
.sub-header { color: #FFF; font-weight: bold; background: #F00; }
.sub-header-highlight { color:# FFF; font-weight: bold; background: #0F0; }
tr.sub-header:hover { background: #0F0; } /* if JS turned off */

.sub-row1 { color: #000; background: #FFF; }
.sub-row2 { color: #000; background: #EEE; }
tr.sub-row1:hover, .sub-row2:hover { background: #FF0; }

HTML の一部:

<tbody onMouseover="changeTo('sub1');" onMouseout="changeBack('sub1');">
   <tr class="sub-header" id="sub1">
      <td>Sub-Header 1</td>
   </tr>
   <tr class="sub-row1">
      <td>Contents of row 1</td>
   </tr>
   <tr class="sub-row2">
      <td>Contents of row 2</td>
   </tr>
   <tr class="sub-row1">
      <td>Contents of row 3</td>
   </tr>
</tbody>

Answer 1

HTML マークアップと CSS の両方を大幅に簡素化でき、Javascript を使用する必要はありません。

• まず、1 行おきのスタイル設定を除いて、すべてのクラスを表示できます (IE 8 以下を気にしない場合は除きます。その場合は、IE 条件付き CSS とクラス名を取り出すことができます。ブラウザーの CSS セレクターの互換性チャートを参照してください)。
• 次に、tdサブヘッダー内のそれぞれを に変更しthます。
• 3 番目に:hover、親で疑似セレクターを使用して、指定どおりtbodyにスタイルthを設定します。

IE 7 および Firefox 14 で完全に動作することがテストされている jsfiddle で動作するこれを参照してください。

CSSは次のとおりです。

table { border-collapse:collapse; }
thead { color: #FFF; background-color: #000; }

tbody th { color: #FFF; font-weight: bold; background-color: #F00; text-align:left; }
tbody:hover th { background: #0F0; }

tbody tr:nth-child(odd) { background-color:#EEE; }
tbody tr:hover td { background: #FF0; }

スタイルノート:

• CSS プロパティ "background" は色だけではなく、他のプロパティもリセットします。スタイルを設定したい場合は、「背景色」を使用します。
• 特異性ルールが IE に奇数行の特別な色付けよりも高い優先順位を与えるためには、 の追加が必要tdです。tr:hover
• サブヘッダーが最初の奇数行を消費するため、「奇数」行は実際にはデータの偶数行です。
• テーブルに直接ではborder-collapse:collapseなく、CSS を使用します。cellspacing

styleタグの外側にある必要があるため、IE の条件付き CSS をフィドルの HTML セクションに配置する必要がありました。

<!--[if lte IE 8]>
<style type="text/css">
  tbody tr.odd { color: #000; background: #EEE; }
</style>
<![endif]-->

そして、これがHTMLです。きれいになったのがわかりますか？

<table>
   <thead>
      <tr>
         <th>MAIN HEADER</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Sub-Header 1</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
      <tr>
         <td>Contents of row 3</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 2</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 3</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
   </tbody>
</table>

最後に、色はおそらく単なる例にすぎないことを理解しています。明るい原色は人間の認知反応とうまく機能しないことを示唆してもよろしいですか? 代わりに、一種のハイライト効果を得ることができます。（私の目には）より心地よい色を使用して、私があなたのためにまとめた実用的な例を見てください. カーソルを合わせると、セクションがどのように「光る」かがわかりますか? 美しい！

注: IE8 以前では、右側に余分な境界線が表示されます。複数列のテーブルがあり、内側の境界線が好きで IE8 以下をサポートしたい場合は、各行の最後のセルにクラスを追加して、右の境界線を削除できるようにする必要があります。

Answer 2

純粋な CSS (通常のブラウザー互換性の条件付き) でこれを実現できるため、比較的最新の Chrome、Safari、Firefox、Opera、または IE 9 (またはそれ以降) を使用していると仮定します。

tbody:hover tr.sub-header {
    background-color: #0f0;
}

tbody tr.sub-row:hover {
    background-color: #f90;
}​

JS Fiddle デモ(明らかに、好みに合わせて色を調整します。これらはデモンストレーションを目的としたものです)。

もちろん、一部のブラウザーでは要素が表示されない場合があることに注意してください (tr要素の背後にbackground-color表示されるため)。その場合は、代わりに関連する要素をターゲットにするようにセレクターを修正する必要があります。background-colortdtd

tbody:hover tr.sub-header td {
    background-color: #0f0;
}

tbody tr.sub-row:hover td {
    background-color: #f90;
}​