Select only one row at a time using jquery

Question

I use mouseover() , mouseout() and click() to highlight the lines on hover and add a selection 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 the user to "highlight" (for example, add the selectRow class) as many lines as he wants. What is the best way to use jQuery to limit the number of rows that they can select to only one (so that by clicking one row, then clicking another, it will remove the " selectRow " class from the previously selected row)?

Answer 1

You can remove the selectRow class from all tr elements except the click, every time you click on it, and then toggle it on clicked:

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

Here is a working example .

Answer 2

 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 

Answer 3

While I first tried toggleClass / removeClass-way with ".clicked'-Class in CSS", it turned out to be a little behind. So, I did this instead of what 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/

Answer 4

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

Gotta do the trick. Note that this still allows you to switch if you do not want to simply remove the if(){ and } else { ... } parts, leaving:

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

Answer 5

You can try the following:

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

You can also use the .find() method and hyphenation logic to check if any elements have this class before deleting everything.

Answer 6

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, has a "task" identifier + i