使用jQuery select的可点击表格行? [英] Clickable table rows using jquery select?
本文介绍了使用jQuery select的可点击表格行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使可单击的表行与jquery selectable函数一起使用,但是我遇到了困难.它对于li元素非常有效,但是当我尝试使用表时,click事件就退出了.拖动以选择作品,但我确实确实需要能够单击.这是我的代码:
I'm trying to make clickable table rows work with the jquery selectable function, but I'm running into difficulties. It works great with li elements, but as soon as I try to use a table, the click event quits working. Drag to select works, but I really need to be able to click as well. Here is my code:
$(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吗?
Does anyone know how to get click or ctrl + click working in the above example?
推荐答案
您需要在selectable()
上添加filter
.
请参阅过滤器的文档.
我已经更新了您的示例,只是一个很小的变化:
I have updated your example, it's just a small change:
$(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>
这篇关于使用jQuery select的可点击表格行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文