Question

我的网站上有一个表格，我希望能够选择一个单元格和背景颜色更改，然后选择另一个单元格（不在同一行）并让第一个单元格恢复为默认颜色新选择的细胞更改背景颜色。我环顾四周，似乎只能找到我已经拥有的东西或者一堆复选框。我有一个小提琴here。

这是我的CSS：

.selected {
    background-color: rgba(0,0,0,0.4) !important;
    color: #fff;
}

这是我的jquery：

<script type='text/javascript'>//<![CDATA[
    $("#table2 td").click(function ()
    {
        $(this).toggleClass('selected').siblings().removeClass('selected');
    });
    //]]>
</script>

<script type='text/javascript'>//<![CDATA[
    $("#table tr").click(function ()
    {
        $(this).toggleClass('selected').siblings().removeClass('selected');
    });
    //]]>
</script>

这是我的HTML：

<body>

<table id='table'>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Second Row</td>
    <td>Still Second Row</td>
  </tr>
</table>
<br><br>
<table id='table2'>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Second Row</td>
    <td>Still Second Row</td>
  </tr>
  </tbody>
</table>
</body>

我可以table正常选择和取消选择行，但table2无法正常工作。我在一行中选择一个单元格然后在同一行中选择一个单元格它可以工作，但如果我在另一行中选择一个单元格，它不会将第一个单元格更改回默认颜色。上面的小提琴显示了正在发生的事情。

我尝试添加<tbody>，但我不认为我做得正确，因为结果没有改变。

我尝试添加$('.selected').removeClass('selected');，但部分有效。我可以在一行中选择一个单元格，然后在另一行中选择一个单元格，背景颜色会正确更改，但如果我第二次选择第一个单元格则不会取消选择。

Answer 1

您为td选择兄弟姐妹的方式是错误的，请尝试此操作

$("#table2 tbody td").click(function ()
{
  $(this).closest('table').find('td').not(this).removeClass('selected');  
  $(this).toggleClass('selected');
});

Fiddle

Answer 2

它没有在table2中执行，因为你正在调用.sibling（）方法，但期望它改变不是兄弟的元素。这一行中的td：

 <tr>
     <td>January</td>
     <td>$100</td>
</tr>

不是这一行中的兄弟姐妹：

<tr>
    <td>Second Row</td>
    <td>Still Second Row</td>
</tr>

将点击事件中的代码调整为：

$(this).closest('table').find('td').not(this).removeClass('selected');

Answer 3

您可以将标题行包含在<thead></thead>标记中，将正文行包装在<tbody></tbody>标记中，然后使用：

$("#table tbody tr, #table2 tbody tr").click(function() {
  $(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});

<强> jsFiddle example

Answer 4

为所选单元格的样式创建一个 css 样式。

然后为每种情况切换该样式（单击/未单击）并从其余单元格中删除“选定”类。

CSS

.selected {
    color: rgb(252, 69, 69);
}

在 Jquery 中选择单元格时...

$(function(){
  $('body').on('click','table tr',function(e){
    e.preventDefault();

    $(this).toggleClass('selected').siblings().removeClass('selected');

  });
});

在HTML表格中选择和取消选择td

4 个答案: