点击表格行切换元素背景异常求助：仅首行生效且无法复原

问题1：仅表格首行点击有效 #

HTML里id是唯一标识，一个页面不能有多个相同id的元素。你给所有行都用了id="row"，导致JS只能选中第一行。把<tr>的id改成class，就能选中所有表格行。

问题2：点击后无法恢复原始背景色 #

你只用了addClass添加高亮类，没有移除逻辑。用toggleClass可以实现「点击加类，再点击移除类」的切换效果，这样就能恢复传感器盒子的原始白色背景。

修改后的完整代码 #

<style> 
  .row{ /* 把#row改成.row */
    position:relative;
  }
  
  #sensor{
    width:30px;
    height:22px;
    margin: 0 0 -15px 0;
    background-size:100%;
    background: white;  
    background-repeat:no-repeat;
    overflow:hidden;
    border: 1px solid black;
    position:absolute;
    left: 70px; top: 100px;
    z-index: 1;
  }  
  #sensor.clicked {background: greenyellow}
</style> 

<div>
    <table> 
        <tbody>
            <tr class="row"> <!-- id替换为class -->
                <td> 第一行内容 </td>
            </tr>
            <tr class="row"> <!-- 所有行统一用class -->
                <td> 第二行内容 </td>
            </tr>
            <tr class="row">
                <td> 第三行内容 </td>
            </tr>
        </tbody>
    </table>
</div> 

<script>
  $('.row').on('click', function () { // 选中所有带.row类的行
     $("#sensor").toggleClass('clicked'); // 切换高亮类
  });
</script>

<div>
  <div id="sensor">CON</div>
</div>

内容的提问来源于stack exchange，提问作者springsissor