在表的元素中创建假选择效果

Question

所以我想要这个：

但是我不需要选择元素，而是需要它在包含每行两个表格单元格的表格的div元素中。那么整个tr＆gt;应该以类似的方式点亮。

如何在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

Here是我制作的jsFiddle。希望你需要的是:)