Clickable table rows using jquery select?

Question

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?

Mike Scotty · Accepted Answer · 2016-06-14T20:24:03.723

2

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>

edited Jun 14 '16 at 20:24

answered Jun 14 '16 at 20:16

Mike Scotty

10,530
5
38
50

this is not answering the OP question. It's just a bunch of code, please add some explanation on how this addresses OP concerns, what problem there was, and how you solved it. – PA. Jun 14 '16 at 20:18
1

@PA. it's not a "bunch of code", it's one small change, namely `{filter: 'tr'}` in order to make rows selectable. It solves OP's question completely. – Patrick Roberts Jun 14 '16 at 20:29
@PatrickRoberts to be fair, PR posted this before I added the three lines above the code. – Mike Scotty Jun 14 '16 at 20:31
@mpf82 I looked at the edit history -- your initial answer was perfectly sufficient imo. +1 – Patrick Roberts Jun 14 '16 at 20:32
Both this answer and the one below were correct, the filter did indeed get this working. I guess it's only fair to give it to the first response. – Matthew Jun 14 '16 at 21:52

score 1 · Answer 2 · answered Jun 14 '16 at 20:37

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>

Clickable table rows using jquery select?

2 Answers2

Linked