CODEWITHSUNDEEP
javascriptjqueryhtml
Matthew
Matthew

Reputation: 818

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 table, the click event quits working. Drag to select works, but I really need to be able to click as well. Here is my code: 

$(function() {
  $("#selectable").selectable();
});
#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%;
}
#selectable tr {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->

<table id="selectable" style="width:100%">
  <tr class="ui-widget-content">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="ui-widget-content">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Does anyone know how to get click or ctrl + click working in the above example?

Upvotes: 1

Views: 1794

Answers (2)

Michelle Tan
Michelle Tan

Reputation: 395

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%;
}
#selectable tr {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->

<table id="selectable" style="width:100%">
  <tr class="ui-widget-content">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="ui-widget-content">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Upvotes: 1

Mike Scotty
Mike Scotty

Reputation: 10782

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%;
}
#selectable tr {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->

<table id="selectable" style="width:100%">
  <tr class="ui-widget-content">
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="ui-widget-content">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Upvotes: 2

Related Questions