Question

I have a repeater, and i just want that when i select or click on any row of it then that would be highlighted. I had tried some code of javascript which makes the selected row highlighted, but not unhighlighting when select any other row.My code is:-

<tr id="gh" style="cursor: pointer" onclick="Select(this);">

any javascript’s and style’s code is:-

<style type="text/css">
    .highlight
    {
        background-color: Red;
    }
    .selected
    {
        background-color: #ffdc87;
    }
</style>

<script type="text/javascript">
    function Select(obj) {
        obj.className = 'selected';
        var tbl = document.getElementById("Repaddressorbbl")
        var firstRow = tbl.getElementsByTagName("TR")[0];
        var tableRowId = tbl.rows[firstRow.getElementById("gh").parentNode.id];
        alert(tableRowId);
        var oldRow = tbl.rows[firstRow.getElementsByTagName("tr")[0].value];
        if (oldRow != null) {
            oldRow.className = '';
        }
        firstRow.getElementsByTagName("tr")[0].value = obj.rowIndex;

    }

</script>

We can do it simply with code behind but the matter is it should be done only with jquery or javascript.

Answer 1

You can use code similar to this:

var INDEX = $(this).parent().children().index($(this));
$('#Repaddressorbbl tr:nth-child(' + INDEX + ')').addClass("highlight") 
                        .siblings()
                        .removeClass("highlight");  // remove css class from other rows

It gets the rownumber of the TR and adds a CSS class while removing the same class from all other TRs.