javascript 选中时突出显示表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25328844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight table row when selected
提问by sebster
I'm trying to make it so that when a row is clicked, it gets highlighted (to make it clear that it is the currently selected row). And when another row is clicked, the previously selected row becomes un-highlighted and the new one becomes highlighted.
我试图让它在单击一行时突出显示（以表明它是当前选定的行）。当单击另一行时，先前选择的行将变为未突出显示，而新的将变为突出显示。
As of now, what happens is that when I hover over a row, it gets highlighted (which works as planned), but when I click the background-color of the rows do not change. Some of my code is below, thanks in advance.
到目前为止，发生的情况是，当我将鼠标悬停在一行上时，它会突出显示（按计划工作），但是当我单击行的背景颜色时，它不会改变。我的一些代码如下，提前致谢。
Here is some example HTML:
这是一些示例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>
This is the relevant part of my JavascriptgetReportDetails function.
这是我的JavascriptgetReportDetails 函数的相关部分。
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");
}
});
And this is the involved CSS.
这就是所涉及的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;
}
EDIT: It turned out to just be a cache problem.
编辑：结果证明只是一个缓存问题。
回答by sravis
To toggle the table row click, check like below:
要切换表格行单击，请检查如下：
JSFiddle: http://jsfiddle.net/ta6r6e7g/
JSFiddle：http: //jsfiddle.net/ta6r6e7g/
HTML:
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:
CSS：
tr.selected td {
background-color: #333;
color: #fff;
}
回答by user3804373
$('.table_row').click(function() { //Once any element with class "table_row" is clicked
$('.table_row').removeClass('selected'); // "Unselect" all the rows
$(this).addClass('selected'); // Select the one clicked
}
