[BNM] jquery ui selectable and tables

Fri Dec 19 16:33:09 GMT 2008

Hi,

I'm trying to use the jquery ui selectable method as described in
<http://ui.jquery.com/repository/tags/latest/demos/functional/#ui.selectable>

Does anyone know if this will work with table cells? I've got a small 
sample below which works fine for the <list> but does not seem to work for 
the table cells. I want to be able to select the cells of a table. I'm 
obviously thinking that I shouldn't be using a table layout now. I'm after 
some kind of a grid layout where a person can drag along to select parts of 
the grid.

Any suggestions?

Thanks
Jason

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<link href="css/jqueryui.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" 
src="jquery.ui-1.5.3/jquery-1.2.6.js"></script>
	<script type="text/javascript" 
src="jquery.ui-1.5.3/ui/ui.core.js"></script>
	<script type="text/javascript" 
src="jquery.ui-1.5.3/ui/jquery.ui.all.js"></script>
	<style>
	 .ui-selected {font-weight:500;
	 font-style:italic}
	</style>

	<script>
	  $(document).ready(function() {
	  var selected;
	  $("#dave td, #selectable-example").selectable()
      });
	</script>

  <title>give it a go....</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<ul id="selectable-example" style="list-style:none;  cursor: default;">
   <li style='padding: 5px; border: 1px solid #bbb; margin: 
3px;'>Apples</li>
   <li style='padding: 5px; border: 1px solid #bbb; margin: 
3px;'>Bananas</li>
   <li style='padding: 5px; border: 1px solid #bbb; margin: 
3px;'>Grapes</li>
   <li style='padding: 5px; border: 1px solid #bbb; margin: 
3px;'>Pineapple</li>
   <li style='padding: 5px; border: 1px solid #bbb; margin: 
3px;'>Cherries</li>
   <li style='padding: 5px; border: 1px solid #bbb; margin: 
3px;'>Oranges</li>
</ul>

<table id="dave">
  <tr><td style='padding: 5px; border: 1px solid #bbb; margin: 3px;' 
>A</td><td >B</td><td >C</td></tr>
  <tr><td  style='padding: 5px; border: 1px solid #bbb; margin: 3px;' 
>d</td><td >e</td><td>f</td ></tr>
  <tr><td >g</td ><td >h</td><td >I</td></tr>
</table>

</body>
</html>

-- 
Jason Bailey
IT Services
University of Sussex
http://www.sussex.ac.uk/USIS/phone/details.php?id=17011