javascript - 在表格元素中创建假选择效果

Question

所以我想要这个：

但不是选择元素，我需要它位于一个 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 中删除了每个类，因此只能选择一个。如果您想要多行，而不仅仅是删除每行调用 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。希望这就是你所需要的:)