Add Selectable Class on table cell selection

Question

I have one html table.

<table id="tbl_1">
    <tr>
        <td>ABCD</td>
        <td>ABCD</td>
    </tr>
    <tr>
        <td>ABCD</td>
        <td>ABCD</td>
    </tr>
</table>

I can add selectable class like

$(document).ready(function () {
     jQuery('#tbl_1').selectable({
         filter: "td"
     });
});

I want to add selectable class to that table when i select more than one cell of table. I don't know on which event i can do this. Any help would be appreciated. Thanks.

Answer 1

You can add seletable class to the table by using below code.

$(document).ready(function () {      
     jQuery('#tbl_1').addClass('selectable');        
});
//it add class when page load

Answer 2

$("#tbl_1").selectable({
    filter: "td",
    selecting: function (event, ui) {
        $(ui.selecting).addClass('classA');
    },
    unselecting: function (event, ui) {
        $(ui.unselecting).removeClass('classA');
    },
    selected: function (event, ui) {
        $(ui.selected).addClass('classB');
    },
    unselected: function (event, ui) {
        $(ui.unselected).removeClass('classB');
    }
});     

Following are the function you can use whichever suits your combination

FIDDLE DEMO