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:

    <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 Javascript getReportDetails function.

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.

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