我正在尝试使之单击时将其突出显示（以明确表明它是当前选定的行）。当单击另一行时，先前选择的行将不突出显示，而新的行将突出显示。
到目前为止，发生的事情是，当我将鼠标悬停在一行上时，它会突出显示（按计划工作），但是当我单击行的背景色时，它不会改变。我的一些代码在下面，在此先感谢。
这是一些HTML示例：
<tr class="text_data selected_grey" onclick="getReportDetails(this, '[email protected]');">
<td class="text">John</td>
<td class="text"> Doe</td>
</tr>
<tr class="text_data selected_grey" onclick="getReportDetails(this, '[email protected]);">
<td class="text">Sarah</td>
<td class="text">Dean</td>
</tr>
这是我的Javascript getReportDetails函数的相关部分。
function getReportDetails(elem, email) {
var j_elem = $(elem);
$(".text_data").each(function() {
if ($(this).is(j_elem)) {
j_elem.addClass("selected_grey");
} else {
$(this).removeClass("selected_grey");
}
});
这就是涉及的CSS。
.text_data {
font-family: Verdana;
font-size: 12px;
font-weight: none;
}
.text_data:hover{
cursor: pointer;
background-color: #E0E0E0;
}
.selected_grey {
background-color: #E0E0E0;
}
编辑：原来只是一个缓存问题。
要切换表格行的点击，请检查以下内容：
JSFiddle：http : //jsfiddle.net/ta6r6e7g/
HTML：
<table>
<tr class="text_data selected_grey" onclick="getReportDetails(this, '[email protected]');">
<td class="text">John</td>
<td class="text"> Doe</td>
</tr>
<tr class="text_data selected_grey" onclick="getReportDetails(this, '[email protected]);">
<td class="text">Sarah</td>
<td class="text">Dean</td>
</tr>
</table>
jQuery的：
$(".text_data td").on("click", function() {
var tr = $(this).parent();
if(tr.hasClass("selected")) {
tr.removeClass("selected");
} else {
tr.addClass("selected");
}
});
CSS：
tr.selected td {
background-color: #333;
color: #fff;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句