jquery - 选择/单击时表格行未突出显示

Question

我的应用程序中有多个表，我希望其中一个表的行为有所不同。所以我将 CSS 类绑定(bind)到一个特定的表 ID。这是相同的 fiddle : http://jsfiddle.net/akshaysuri/twya05x1/ 悬停功能工作正常，但单击行时行颜色没有改变。

jQuery:

$("#myTable").on("click", "tr", function(e) {     
    $(this)
        .toggleClass("selected")
        .siblings(".selected")
        .removeClass("selected");
});

CSS:

#myTable tr:hover.selected td,
#myTable tr:hover td {
    background-image: none;
    background-color: #D3D3D3;
}
#myTable tr.selected td {
    background-image: none;
    background-color: red;
}

HTML:

<table id='myTable'>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    <tr>
        <td>DDD</td>
        <td>EEE</td>
        <td>FFF</td>
    </tr>
</table>

Answer 1

试试这个。

function highlight(e) {
  if (selected[0]) selected[0].className = '';
  e.target.parentNode.className = 'selected';
}

var table = document.getElementById('myTable'),
  selected = table.getElementsByClassName('selected');
table.onclick = highlight;

td {
  border: 1px #DDD solid;
  padding: 5px;
  cursor: pointer;
}
.selected {
  background-color: red;
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='myTable'>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
    <td>CCC</td>
  </tr>
  <tr>
    <td>DDD</td>
    <td>EEE</td>
    <td>FFF</td>
  </tr>

</table>