Javascript 在HTML表中选择并取消选择td_Javascript_Jquery_Html_Css

Javascript 在HTML表中选择并取消选择td

javascript jquery html css

Javascript 在HTML表中选择并取消选择td,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在我的网站中有一个表格，我希望能够选择一个单元格并更改背景颜色，然后选择另一个单元格（不在同一行中），并让第一个单元格返回默认颜色，同时新选择的单元格更改背景色。我环顾四周，似乎只能找到我已经得到的东西或是关于一堆复选框的东西。我有一把小提琴以下是我的CSS： .selected { background-color: rgba(0,0,0,0.4) !important; color: #fff; } 以下是我的jquery： <script type='text/

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

以下是我的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>


月
储蓄
一月
$100
第二排
还是第二排



月
储蓄
一月
$100
第二排
还是第二排

我可以让

table

很好地选择和取消选择行，但是

table2

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

我尝试添加一个

，但我认为我没有正确添加，因为结果没有改变

我尝试添加

$（'.selected'）.removeClass（'selected'）并且部分起作用。我可以选择一行中的一个单元格，然后选择另一行中的一个单元格，背景颜色会正确更改，但如果我再次选择第一个单元格，它不会取消选择。
您可以将标题行包装在
标记中，将正文行包装在
标记中，然后使用：
$("#table tbody tr, #table2 tbody tr").click(function() {
  $(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});

您可以将标题行包装在
标记中，将正文行包装在
标记中，然后使用：
$("#table tbody tr, #table2 tbody tr").click(function() {
  $(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});

您为td
选择兄弟姐妹的方式是错误的，请尝试以下操作
$("#table2 tbody td").click(function ()
{
  $(this).closest('table').find('td').not(this).removeClass('selected');  
  $(this).toggleClass('selected');
});

您为td
选择兄弟姐妹的方式是错误的，请尝试以下操作
$("#table2 tbody td").click(function ()
{
  $(this).closest('table').find('td').not(this).removeClass('selected');  
  $(this).toggleClass('selected');
});

在表2中，它没有按您希望的那样执行，因为您正在调用.sibling（）方法，但希望它更改非同级的元素。td位于这一排：
 <tr>
     <td>January</td>
     <td>$100</td>
</tr>

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

它没有按照表2中的要求执行，因为您正在调用.sibling（）方法，但希望它更改非同级的元素。td位于这一排：
 <tr>
     <td>January</td>
     <td>$100</td>
</tr>

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

为选定单元格的样式创建css样式
然后针对每种情况切换该样式（单击/未单击），并从其余单元格中删除“选定”类
CSS
在Jquery中选择单元格时
$(function(){
  $('body').on('click','table tr',function(e){
    e.preventDefault();

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

  });
});

为选定单元格的样式创建css样式
然后针对每种情况切换该样式（单击/未单击），并从其余单元格中删除“选定”类
CSS
在Jquery中选择单元格时
$(function(){
  $('body').on('click','table tr',function(e){
    e.preventDefault();

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

  });
});

这只是更改行，我希望能够更改第二个表中的单元格。这只是更改行，我希望能够更改第二个表中的单元格。成功了！我知道我做得不对。我从昨天开始才开始使用jquery。就是这样！我知道我做得不对。我从昨天开始才开始使用jquery。我不理解它的这一部分。我想既然他们在
中，他们就会是兄弟姐妹。谢谢你的解释！我不明白这部分。我想既然他们在
中，他们就会是兄弟姐妹。谢谢你的解释！