I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:

    //Mouseover any row by adding class=mouseRow
    $(".mouseRow tr").mouseover(function() {
        $(this).addClass("ui-state-active");
    });
    $(".mouseRow tr").mouseout(function() {
        $(this).removeClass("ui-state-active");
    });
    $('.mouseRow tr').click(function(event) {
        $(this).toggleClass('selectRow'); 
    });

The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

I am using mouseover(), mouseout() and click() to highlight rows on mouseover and add a highlight class on click:

    //Mouseover any row by adding class=mouseRow
    $(".mouseRow tr").mouseover(function() {
        $(this).addClass("ui-state-active");
    });
    $(".mouseRow tr").mouseout(function() {
        $(this).removeClass("ui-state-active");
    });
    $('.mouseRow tr').click(function(event) {
        $(this).toggleClass('selectRow'); 
    });

The above code will allow a user to 'highlight' (i.e add class selectRow) to as many rows as they want. What is the best way, using jQuery, to limit the number of rows they can select to just one (so that if they click one row, then click another it will remove the 'selectRow' class from the previously selected row)?

• javascript
• jquery
• jquery-ui

6 Answers 6

You could remove the selectRow class from all of the tr elements except the clicked one whenever you click on one, and then toggle it on the clicked one:

$('.mouseRow tr').click(function(event) {
    $('.mouseRow tr').not(this).removeClass('selectRow');
    $(this).toggleClass('selectRow'); 
});

Here's a working example.

Use this script at end of your html,meant after </body> tag

<script>
 $("tr").hover(function() 
 {
   $(this).addClass("hover"); 
 }, function()
    {
    $(this).removeClass("hover");
    });
$('tr').click(function(event) {
        $('tr').not(this).removeClass('click');
        $(this).toggleClass('click'); 
    });
</script>


This is css that highlight your row:

    .click{
background:#FF9900;
color: white
}

.hover{
background:blue;
color: white
}

here is the link of working example

Working example

Hope this will help

While I first tried the toggleClass/removeClass-way with a '.clicked'-Class in CSS, it turned out to lag a bit. So, I did this instead which works better/faster:

$(document).on('click', '.DTA', function (event) {        
    $('.DTA').not(this).css('backgroundColor', "#FFF");
    $(this).css('backgroundColor', "#FAA");        
});

Here is the fiddle: https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

$('.mouseRow tr').click(function(event) {
        if (!$(this).hasClass('selectRow')){
           $('.selectRow').removeClass('selectRow');
           $(this).addClass('selectRow'); 
        } else {
           $('.selectRow').removeClass('selectRow');
        }
});

Should do the trick. Note this still allows your toggle, if you don't want that just remove the if(){ and } else { ... } parts leaving:

           $('.selectRow').removeClass('selectRow');
           $(this).addClass('selectRow'); 

Using jquery-ui .selectable function with tbody id='selectable':

$(function() {
    $("#selectable").selectable({
        filter: "tr", //only allows table rows to be selected
        tolerance: "fit", //makes it difficult to select rows by dragging
        selected : function(event, ui) {
            var rowid = "#"+ui.selected.id; //gets the selected row id
            //unselects previously selected row(s)
            $('tr').not(rowid).removeClass('ui-selected');
        }
    });
});

Each of my table rows, which were created dynamically have an id of 'task'+i

You could try this:

$('.mouseRow tr').click(function(event) {
    $('.mouseRow tr').each(function(index) {
        $(this).removeClass('selectRow');
    });
    $(this).toggleClass('selectRow'); 
});

You could also use the .find() method and wrap logic to check if any elements have this class first before removing all.