Question

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

我试图应用这个：

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

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

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

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

Answer 1

最终答案（成功！）

最后，感谢这个问题：How to run a function after an external JS script finishes running我已经达到了以下解决方案：

<强> JSFiddle

dropup

以下现已过时，但会显示最终答案的历史记录

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

a）从当前拥有它的行中删除dropup类。

b）将$(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"); } }); }); CSS类添加到当前最后一行的行中。

jQuery代码：

dropup

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

修改

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

您有两种选择：

通过在代码中添加新函数来修改本地bootstrap-sortable.js，以添加function doSort($this, $table){...}类，就像我在上面的代码片段中所做的那样。我会首先尝试在th的末尾或您认为合适的任何地方进行调用。

你可以认为，在bootstrap-sortable.js完成运行后需要发生的事情是可以理解的。也许正在寻找th中类的更改，然后运行我上面写的代码片段。也许听某种事情要改变。在我个人的尝试中，我无法做到这一点（遗憾的是）。我想做的最简单的事情是在点击它们之后听取{{1}}上课程的更改（在网络检查员上查看）。然而， this article 和 this article 让我相信这种做法过于繁琐或根本无法实现。

因此，请尝试选项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/

Bootstrap button drop-down inside responsive table not visible because of scroll

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

2 个答案: