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

Question

我的网站中有一个表格，我希望能够选择一个单元格并更改背景颜色，然后选择另一个单元格（不在同一行中）并使第一个单元格返回默认颜色，而新选择的单元格改变背景颜色。 我环顾四周，似乎只能找到我已经拥有的东西或关于一堆复选框的东西。 我这里有一个小提琴。

这是我的 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');
});

小提琴

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 示例

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 个解决方案

解决方案1
2 已采纳 2016-07-28 18:14:17

解决方案2
1 2016-07-28 18:16:26

解决方案3
0 2016-07-28 17:58:38

解决方案4
0 2021-05-26 18:36:10

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-07-28 18:14:17

解决方案2 1 2016-07-28 18:16:26

解决方案3 0 2016-07-28 17:58:38

解决方案4 0 2021-05-26 18:36:10

解决方案1
2 已采纳 2016-07-28 18:14:17

解决方案2
1 2016-07-28 18:16:26

解决方案3
0 2016-07-28 17:58:38

解决方案4
0 2021-05-26 18:36:10