我试图使可点击的表格行与 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>
有谁知道如何在上面的示例中让点击或 ctrl + 点击起作用?
最佳答案
您需要向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>
关于javascript - 使用 jquery select 的可点击表行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37821175/