jQuery可选小部件和一列表行

时间:2016-05-01 17:42:59

标签: javascript jquery html css jquery-ui-selectable

我尝试只选择该表的右侧部分;问题是我的左侧大小有 rowspan ,我真的不想选择那些!有什么建议?感谢

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

1 个答案:

答案 0 :(得分:1)

将CSS和JS更新为以下(jsfiddle):

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

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

注意:

event.metaKeyread-only property