Question

我的应用程序中有多个表，我希望其中一个表的行为不同。所以我将CSS类绑定到特定的表Id。这是相同的小提琴： 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>

Answer 2

Answered here - 在您的情况下，您可以在切换前的所有tr上.removeClass('clicked')。

创建一个CSS类：

.clicked {
  background-color: yellow;
}

然后通过jQuery简单地toggle that class：

$('.star').click(function(){
  $(this).toggleClass('clicked');
});

表格行在选择/单击时不突出显示

2 个答案: