jQuery selectable widget and one columns table rows

Question

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'
    });
});

Uzbekjon · Accepted Answer · 2016-05-01 18:04:34Z

1

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.

edited May 1, 2016 at 18:04

answered May 1, 2016 at 17:56

Uzbekjon

11.8k5 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Robert-Dan Over a year ago

Kool, also it is possible to keep the onSelect css style; and how to do that ? I mean when i drag the mouse over the rows they need to became coloured!

Uzbekjon Over a year ago

Updated the CSS snippet.

Robert-Dan Over a year ago

jQuery Selectable widget for shore has some option to ignore the first table column! do you think is necessary to add a css class or are there any other options?

Uzbekjon Over a year ago

@JohniDevo, consider creating separate question. I think the original question is answered.

Robert-Dan Over a year ago

The question is how to use selectable widget only for one right column! Thanks for the answers; I will figure it out from here :)

Collectives™ on Stack Overflow

jQuery selectable widget and one columns table rows

1 Answer 1

Note:

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Note:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related