使用jquery select的可点击表行？答案

【问题标题】：Clickable table rows using jquery select?使用jquery select的可点击表行？
【发布时间】：2016-06-14 20:08:12
【问题描述】：

我正在尝试使可点击的表格行与 jquery 可选择功能一起使用，但我遇到了困难。它适用于 li 元素，但是一旦我尝试使用表格，点击事件就会停止工作。拖动选择作品，但我真的需要能够点击。这是我的代码：

$(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>

有谁知道如何在上面的示例中使用 click 或 ctrl + click ？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您需要将filter 添加到selectable()。

请参阅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>

【讨论】：

这不是回答 OP 问题。这只是一堆代码，请添加一些解释，说明这是如何解决 OP 问题、存在什么问题以及如何解决的。
@PA。这不是“一堆代码”，而是一个小改动，即{filter: 'tr'}，以便使行可选择。它完全解决了OP的问题。
@PatrickRoberts 公平地说，PR 在我添加代码上方的三行之前发布了这个。
@mpf82 我查看了编辑历史记录——你最初的回答是完全足够的 imo。 +1
这个答案和下面的答案都是正确的，过滤器确实可以正常工作。我想把它给第一个响应是公平的。

【解决方案2】：

根据您的情况使用过滤器。 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>

【讨论】：