无论排序如何获取最后一个表行？

我有一个应用于table-responsive类，我正在使用下拉列表。 因此，下拉总是落在桌子后面。 正如我之前听到的那样，这种情况无法解决。 所以我试图从表中获取最后一行并添加dropup类，但由于表是可排序的，因此最后一行可能会在每种排序中发生变化。

我试着申请这个：

 $("table#MyTable>tbody>tr:last>td>div").addClass("dropup"); 

…工作，但是当用户对表进行排序时，最后一行不再是最后一行。

示例： http ： //jsfiddle.net/bqg0cyyL/ （应用了dropup的最后一行）

怎么只有最后一行获得dropup类（无论排序）？

Answer 1

最终答案（成功！）

最后感谢这个问题： 如何在外部JS脚本完成运行后运行一个函数我已经到达下面的解决方案：

的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"); }); }); 

现在已经过时，但它显示了最终答案的历史

1. 使用JavaScript或JQuery来识别何时发生排序（单击表列标题上的ocurring）。
2. 如果发生排序并且最后一行具有dropup类，那么我们不需要做任何事情。

3. 除此以外，

   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"); } }); }); 

请注意，您的dropup类未在jsfiddle中指定，因此我只能假设您提供的内容。 如果您有任何疑问，请告诉我。

编辑

上面的代码不起作用。 这是因为bootstrap-sortable.js负责表的排序。 这意味着，如果上面的click事件处理程序就位，bootstrap-sortable.js将在完成后运行。

你有两个选择：

1. 通过在代码中添加一个新函数来修改你的本地bootstrap-sortable.js来添加dropup类，就像我在上面的代码片段中所做的那样。 我会首先尝试在function doSort($this, $table){...}的末尾或者你认为合适的其他地方调用它。

2. 你可以想一想，在bootstrap-sortable.js完成运行后需要发生的事情是可以理解的。 也许正在寻找改变的类，然后运行我上面写的代码片段。 也许听某种事件要改变。 在我个人的尝试中，我无法做到这一点（遗憾的是）。 我想做的最简单的事情就是在点击它之后听取课程的更改（在网络检查员上查看）。 然而， 这篇文章和本文让我相信这种方法既麻烦又根本不可能。

因此，请尝试选项1并查看它是如何适用的，否则在外部JS文件结束后询问有关如何实现事件侦听器的新问题是值得的。

Answer 2

因为你的主要问题是桌子后面的下拉列表。 要解决这个问题，请使用下面的jQuery代码。

 $('.table-responsive').on('show.bs.dropdown', function () { $('.table-responsive').css( "overflow", "inherit" ); }); $('.table-responsive').on('hide.bs.dropdown', function () { $('.table-responsive').css( "overflow", "auto" ); }) 

http://jsfiddle.net/bqg0cyyL/2/

由于滚动，响应表内的引导按钮下拉不可见