我有一个应用于表
的table-responsive
类,并且我正在使用下拉菜单。因此,下拉菜单总是位于表格后面。正如我之前所听到的,这种情况没有解决办法。
因此,我尝试从表中获取最后一行并添加 dropup 类,但由于表是可排序的,所以最后一行在每次排序中都可能会发生变化。
我尝试应用这个:
$("table#MyTable>tbody>tr:last>td>div").addClass("dropup");
...有效,但是当用户对表进行排序时,最后一行不再是最后一行。
示例:http://jsfiddle.net/bqg0cyyL/ (最后一行应用了 dropup
)
如何只有最后一行才能获得dropup
类(无论排序)?
最佳答案
最终答案(成功!)
最后感谢这个问题:How to run a function after an external JS script finishes running我已经找到以下解决方案:
<强> JSFiddle
$(document).ready(function() {
$("#MyTable").on('sorted', function(){
var lastRow = $("#MyTable").find("tbody tr:last");
// Removing dropup class from the row which owned it
$("#MyTable").find("tbody tr.dropup").removeClass("dropup");
// Adding dropup class to the current last row
lastRow.addClass("dropup");
});
});
下面现已过时,但它显示了最终答案的历史记录
- 使用 JavaScript 或 JQuery 来识别何时进行排序(单击表格列标题上的点击)。
- 如果发生排序并且最后一行具有
dropup
类,那么我们不需要执行任何操作。 否则,
a) 从当前拥有
dropup
类的行中删除该类。b) 将
dropup
CSS 类添加到当前表格最后一行。
jQuery 代码:
$(document).ready(function() {
$("th").click(function() {
var lastRow = $(this).closest("table").find("tbody tr:last");
if(!lastRow.hasClass("dropup")){
// Removing dropup class from the row which owned it
$(this).closest("table").find("tbody tr.dropup").removeClass("dropup");
// Adding dropup class to the current last row
lastRow.addClass("dropup");
}
});
});
请注意,您的 jsfiddle 中未指定您的 dropup
类,因此我只能假设您提供的内容。如果您有任何疑问,请告诉我。
编辑
上面的代码将不起作用。这是因为 bootstrap-sortable.js 负责表的排序。这意味着,如果像上面这样的点击事件处理程序就位,bootstrap-sortable.js 将在完成后运行。
您有两个选择:
通过在代码中添加新函数来添加
dropup
类来修改本地 bootstrap-sortable.js,就像我在上面的代码片段中所做的那样。我首先尝试在函数 doSort($this, $table){...} 的末尾或您认为合适的其他任何地方调用它。你可能会想,好吧,在 bootstrap-sortable.js 运行完成后需要发生一些事情是可以理解的。也许在第
th
中寻找类的更改,然后运行我上面编写的代码片段。也许是听某种事件来改变。在我个人的尝试中,我没能做到这样的事情(遗憾的是)。我想到的最简单的事情就是在单击它们后监听类的变化(在网络检查器上亲自查看)。然而this article 和 this article 让我相信这种方法要么太麻烦,要么根本不可能。
因此,请尝试选项 1,看看它对您有何帮助,否则值得提出一个关于如何在外部 JS 文件结束后实现事件监听器的新问题。
关于jquery - 无论排序如何,如何获取最后一个表行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34184576/