javascript - 一次只突出显示一行，切换 css 类

Question

如果我在这样的表中有行 http://output.jsbin.com/icusec/2我在单击时突出显示所选行的位置，如何改进它以仅选择一个，例如，如果我首先选择第三行，它将突出显示，但是当我单击第二行时，第二行应该突出显示，第三行应该突出显示不是。

$(document).ready(function(){
    $("#rowClick").children("tbody").children("tr").children("td").click(function(){
        $(this.parentNode).toggleClass("active");
    });
});

table, table tr, table tr td {margin: 0; padding: 0; border: 0; cursor: pointer;}
table tr.active td {background: #ccc;}

<table id="rowClick">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
  </table>

Answer 1

你的 JavaScript 会像这样:

$(document).ready(function() {
  $("#rowClick").on('click', 'tr', function() {
    $(this)
      .addClass('active')
      .siblings()
          .removeClass('active');
  });
});

table,
table tr,
table tr td {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
table tr.active td {
  background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowClick">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>