Remove jquery selectable from first row and first column of a table

Question

I've got a classic table and I want to do selection on td elements of it except on the first column and on the first row of the table.

I've tried doing

 $( ".calendarione table" ).not('tr:first-child').selectable({
        filter: "td.selectable_calendar_item",
    ...

But it doesn't work. (This example is relative to the first row). How can I do?

EDIT: This is the html: http://pastebin.com/VQDJhkA9 The first row represent the days of the month, clicking on them "a element" I will open close the date of all rooms (the next rows items).

The next rows represent the rooms (is an hotel rooms availability table), the first td element is the room name and the next td elements represent the status of the room on each day.

Answer 1

Place first row in thead and make tbody selectable like below. Hope this will help you.

 $("#selectable > tbody").selectable(); 

 #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script> <table id="selectable"> <thead> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>