高亮一次仅切换一行，切换CSS类

用户名

如果我在像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>

古拉迪奥

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

.active{color:red}

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