Clickable Table Rows Using Jquery Select?

I'm trying to make clickable table rows work with the jquery selectable function, but I'm running into difficulties. It works great with li elements, but as soon as I try to use a

Solution 1:

You need to add a filter to the selectable().

Please see the documentation for filter.

I have updated your example, it's just a small change:

$(function() {
  $("#selectable").selectable({filter: 'tr'});
});

#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: 100%;
}
#selectabletr {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}

<linkhref="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script><scriptsrc="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><!-- <link  href="/resources/demos/style.css"> --><tableid="selectable"style="width:100%"><trclass="ui-widget-content"><td>Jill</td><td>Smith</td><td>50</td></tr><trclass="ui-widget-content"><td>Eve</td><td>Jackson</td><td>94</td></tr></table>

Solution 2:

use a filter for your case. http://api.jquery.com/filter/

$(function() {
  $("#selectable").selectable({filter: 'tr'});
});

#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: 100%;
}
#selectabletr {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}

<linkhref="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script><scriptsrc="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><!-- <link  href="/resources/demos/style.css"> --><tableid="selectable"style="width:100%"><trclass="ui-widget-content"><td>Jill</td><td>Smith</td><td>50</td></tr><trclass="ui-widget-content"><td>Eve</td><td>Jackson</td><td>94</td></tr></table>