Hello,

I have a table with multiple columns

Col1 Col2 Col3

HTML Code:
<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

HTML Code:
$(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
HTML Code:
$(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