javascript - テーブルの要素に偽の選択効果を作成する

Question

だから私はこれが欲しい：

ただし、select 要素の代わりに、各行に 2 つのテーブル セルがあるテーブルを含む div 要素に配置する必要があります。したがって、tr> 全体が同じように点灯するはずです。

cssでそのようなことをどのように行うのですか?

Answer 1

tr のクラスを変更すると、はるかに簡単になります。

CSS

.selected td {
   background-color: red;
   color: white;
}

JS

$('#id-of-your-table tr td').click(function(){
  $('#id-of-your-table tr').removeClass('selected');
  $(this).parent().addClass('selected');
});

それだけです。すべての tr からすべてのクラスを削除したので、選択できるのは 1 つだけです。行ごとに removeClass が呼び出される行を削除するだけでなく、複数の行が必要な場合は、jQuery セレクターを使用してすべての行にアクセスできます。

$('#id-of-your-table tr.selected')

選択したすべての行が表示されます。

そして、ここでは、テーブル行の選択と選択解除、および複数選択のための JS です。

JS

$('#id-of-your-table tr td').click(function(){
  if($(this).parent().hasClass('selected'))
     $(this).parent().removeClass('selected');
  else
     $(this).parent().addClass('selected');
});

Answer 2

これが私が作ったjsFiddleです。それがあなたが必要としていたものであることを願っています:)