jQuery UI selectable limit per table column

JavaScript
1

Hello,

I have a table with multiple columns

[table=“width: 500, class: grid, align: center”]
[tr]
[td]Col1[/td]
[td]Col2[/td]
[td]Col3[/td]
[/tr]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[tr]
[td][/td]
[td][/td]
[td][/td]
[/tr]
[/table]


<table id='myTable'>
<tr><td id='col1_myCell1' class='myCell'></td><td id='col2_myCell1' class='myCell'></td><td id='col3_myCell1' class='myCell'></td></tr>
<tr><td id='col1_myCell2' class='myCell'></td><td id='col2_myCell2' class='myCell'></td><td id='col3_myCell2' class='myCell'></td></tr>
<tr><td id='col1_myCell3' class='myCell'></td><td id='col2_myCell3' class='myCell'></td><td id='col3_myCell3' class='myCell'></td></tr>
</table>

I need to make this table selectable on its TDs, which is no problem and very easy. But I am trying to limit the selection per column. Let’s say I start selecting the cells of column one, i should not be able to select the other columns while selecting.
I made some script, but it doesn’t seems to be working perfectly


$(function() {
	$("#myTable").selectable({filter: ".myCell"});
	$(".myCell").live('mouseenter', function() {
		var id = $(this).attr('id').split('_');
		$("#myTable").selectable({
			filter: "td[id^='"+id[0]+"']"
		});
	});
});

I also tried

$(function() {
	$("#myTable").selectable({filter: ".myCell"});
	$(".myCell").live('mouseenter', function() {
		var id = $(this).attr('id').split('_');
		$("#myTable").selectable('option', 'filter', "td[id^='"+id[0]+"']");
	});
});

While the basic functionality I am looking for is there, but it is not working perfectly.

So how can we make this requirement possible?

Thanks