Selectable interaction among tr elements of table
Hello,
I am very new to JQuery and I need some help..
I've taken the code for serialize selectable from here
http://jqueryui.com/demos/selectable/#serialize
and altered it a little.
My goal is to be able to multiple select rows from a table and access their ids. My altered code is
...
<link type="text/css" href="jquery/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<style type="text/css">
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(){
var result = $("#select-result").empty();
$(".ui-selected", this).each(
function(){
/* var index = $("#selectable li").index(this);*/
var index = $(this).attr('id');
result.append( (index)+", ");
}
);
}
});
});
</script>
</head>
<body>
<div class="demo">
<p id="feedback">
You've selected: <span id="select-result">none</span>.
</p>
<table id="selectable">
<tr id="31" class="ui-widget-content"><td>Item 1</td></tr>
<tr id="32" class="ui-widget-content"><td>Item 2</td></tr>
<tr id="33" class="ui-widget-content"><td>Item 3</td></tr>
<tr id="34" class="ui-widget-content"><td>Item 4</td></tr>
<tr id="35" class="ui-widget-content"><td>Item 5</td></tr>
<tr id="36" class="ui-widget-content"><td>Item 6</td></tr>
</table>
</div><!-- End demo -->
<div class="demo-description">
<p>Write a function that fires on the <code>stop</code> event to collect the index values of selected items. Present values as feedback, or pass as a data string.</p>
</div><!-- End demo-description --><!-- End demo-description -->
</body>
</html>
The problem i observe is the following:
when i select elements once at a time using Ctrl I get the result as You've selected: 32, 34, 36, . which is the expected.
However, when i multiple select rows using the "lasso" i get the results as You've selected: , 32, , 33, , 34, , 35, , . :S
More commas than expected!! :S :S
Could anyone help me to understand why is this happening?
Thanks a lot!