Johni Devo Johni Devo - 7 months ago 44
Javascript Question

jQuery selectable widget and one columns table rows

I try to make selectable only the right part of this table; The problem is i have a rowspan in left size and i don't really want to select those! Any suggestions? Thanks

jsfiddle: https://jsfiddle.net/johnidevo/xLabgoa3/1/

HTML:

<!DOCTYPE html>

<body>
<table border="1" style="width:100%" class="sel-table">

<thead>
<tr>
<th colspan="2">veve</th>
</tr>
</thead>

<tbody>
<tr>
<th rowspan="2">Merged</th>
<td>Smith</td>
</tr>
<tr>
<td>Jackson</td>
</tr>

<tr>
<th rowspan="2">Doe</th>
<td>80</td>
</tr>
<tr>
<td>Doe</td>
</tr>
<tbody>


</table>
</body>


CSS

.ui-selectable>.ui-selected { background-color: #a6c9e2; }
.ui-selectable>.ui-selecting { background: #FECA40; }
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }


JavaScript

$(function() {
$(".sel-table>tbody").bind("mousedown", function (e) {
e.metaKey = false;
}).selectable({
filter: 'tr'
});
});

Answer

Update your CSS and JS to the following (jsfiddle):

$(function() {
  $(".sel-table>tbody").bind("mousedown", function(e) {
    e.metaKey = false;
  }).selectable({
    filter: 'td'                  // < === HERE ===
  });
});
.ui-selectable .ui-selected {     // < === HERE ===
  background-color: #a6c9e2;
}

.ui-selectable .ui-selecting {
  background: #FECA40;
}

Note:

The event.metaKey is a read-only property.