Question

我正在尝试这样做，以便在单击一行时，它会突出显示（以明确它是当前选定的行）。单击另一行时，先前选定的行将突出显示，新的行将突出显示。

截至目前，当我将鼠标悬停在一行上时，它会突出显示（按计划工作），但是当我单击行的背景颜色时，不会更改。我的一些代码在下面，感谢提前。

以下是一些示例 HTML ：

    <tr class="text_data selected_grey" onclick="getReportDetails(this, 'johndoe@gmail.com');">
        <td class="text">John</td> 
        <td class="text"> Doe</td>
    </tr>
    <tr class="text_data selected_grey" onclick="getReportDetails(this, 'sarah@gmail.com);">
        <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;
}

编辑：结果只是一个缓存问题。

Answer 1

要切换表格行，请按以下方式检查：

JSFiddle：http://jsfiddle.net/ta6r6e7g/

HTML：

<table>
      <tr class="text_data selected_grey" onclick="getReportDetails(this, 'johndoe@gmail.com');">
        <td class="text">John</td> 
        <td class="text"> Doe</td>
    </tr>
    <tr class="text_data selected_grey" onclick="getReportDetails(this, 'sarah@gmail.com);">
        <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;    
}

Answer 2

$('.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
}

选中时突出显示表格行

2 个答案: