Javascript 选中时高亮显示表格行

我试图使其在单击行时高亮显示（以明确它是当前选定的行）。当单击另一行时，先前选定的行变为未高亮显示，而新行变为高亮显示

到目前为止，当我将鼠标悬停在一行上时，它会高亮显示（按计划工作），但当我单击行的背景色时，它不会改变。下面是我的一些代码，提前谢谢

下面是一些示例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>

这就是所涉及的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;
}

---

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

要切换表行，请单击，如下所示：

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

JSFiddle：

HTML:

CSS:

---

看起来很好哇，这很奇怪…我的应用程序还是没用。实际上可能与css的其余部分有关？我会进一步调查。

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

<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>

$(".text_data td").on("click", function() {
    var tr = $(this).parent();
    if(tr.hasClass("selected")) {
        tr.removeClass("selected");
    } else {
        tr.addClass("selected");
    }

});

tr.selected td {
    background-color: #333;
    color: #fff;    
}