How to make two sets of selection by JQuery UI selectable widget?

Question

I am trying to use UI Selectable to make two sets of selections.

The process is like this:

First, I select several rows then click a button to set to finish this first round selection. And the selected rows will be highlighted to a color, i.e. "red". Then, I begin second round selection. This second round selection should not change the color of the first round selected rows. After second round selection, click a button to set the finish of second round selection; and this second round selection will be highlighted by another color, say, "green".

I can easily make the first round selection, but I can not figure out how to make the second round selection while keep my first round selection color unchanged. I can manually add an id to the first round selection, but I don't know how to keep the first round selection's color unchanged when I make the second round selection. I even tried to make a new css style for the first round selected results to keep its highlighted color, but it just didn't work.

add some code here:

<!--<link rel="stylesheet" type="text/css" href="js/themes/blue/style.css"/>-->
<link rel="stylesheet" type="text/css" href="js/css/redmond/jquery-ui-1.8.20.custom.css">
<style>

#tablebody .ui-selecting { background: #F5F5DC; }
#tablebody .ui-selected { background: #98F5FF; color: black; }
.ui-selected-grp1 {background: red; color: black; }
#tablebody { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#tablebody tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
<script src="js/js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("#metatable").tablesorter();
    $("#tablebody").selectable();
        $('#grp1').click(function(){
        $('tr.ui-selected').addClass('ui-selected-grp1');

        return false;
    })
})
</script>

As you can see, I try to add class "ui-selected-grp1" to control the first round selection color, but it didn't work. When I began to make a second round selection, the highlight of first round was just gone. Could you give me some advice or code example for this process?

Answer 1

Here's a basic approach to accomplish this - http://jsfiddle.net/vC7NP/. Styling the selected elements via jQuery's css method will override any CSS applied by jQuery UI so the color change from the first round should remain.