jquery - HTML テーブルの行の一部を強調表示する

Question

HTMLで次のような表があります。

 <table>
  <tr>
   <td>col1</td>
   <td>col2</td>
   <td>col3</td>
   <td>col4</td>
   <td>col5</td>
  </tr>
 </table>

現時点では、ロールオーバーがあり、行全体をクリックしているため、マウスで移動すると背景色が変わり、任意の列をクリックするとイベントが発生します。

私の質問は次のとおりです。このレイアウトを変更し、マウスオーバー時に列3〜5のみを強調表示し、そこをクリックすると同じイベントが実行されると便利ですが、列1または列2の名前をクリックすると、その名前の URL に移動します。

基本的に、テーブル行の強調表示を列 3 ～ 5 に制限し、それらの列のいずれかをクリックしてイベントをトリガーできるかどうかを調べようとしています。

解決策は、行 3 ～ 5 をスパン内に配置することですか? それはうまくいかないようです。

score 0 · Accepted Answer

:gt()セレクターを使用する方法。ドキュメントから：

一致したセット内の index より大きいインデックスにあるすべての要素を選択します。

gtは 0 ベースであるため、列 3 ～ 5 を強調表示するには、1 として使用する必要がありますindex。

JS:

$("tr").on("mouseover mouseout", function () {
    $(this).find("td:gt(1)").toggleClass("highlight");
});

CSS

.highlight {
    background-color: aqua;
}

デモ

score 0 · Accepted Answer

jQuery のスライスを使用して、特定の列のサブセットにクラスを追加できます。

$("tr").hover(function() {
  $(this).find("td").slice(2,5).addClass("hovering");
}, function() {
  $(this).find("td").removeClass("hovering");
});

3 に答える 3