使用jquery select的可点击表格行?

时间:2016-06-14 20:08:13

标签: javascript jquery html

我试图使可点击的表行与jquery可选功能一起工作,但我遇到了困难。它对li元素很有用,但是一旦我尝试使用表格,click事件就会退出。拖动以选择作品,但我确实也需要能够点击。这是我的代码:



$(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>
&#13;
&#13;
&#13;

有人知道如何在上面的例子中点击或按住ctrl +点击工作吗?

2 个答案:

答案 0 :(得分:2)

您需要向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>

答案 1 :(得分:1)

为您的案例使用过滤器。 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>