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

Question

我有一个应用于表的table-responsive类，并且我正在使用下拉菜单。因此，下拉菜单总是位于表格后面。正如我之前所听到的，这种情况没有解决办法。因此，我尝试从表中获取最后一行并添加 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

$(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 来识别何时进行排序(单击表格列标题上的点击)。
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");
    }
  });
});

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

编辑

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

您有两个选择:

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

2. 你可能会想，好吧，在 bootstrap-sortable.js 运行完成后需要发生一些事情是可以理解的。也许在第 th 中寻找类的更改，然后运行我上面编写的代码片段。也许是听某种事件来改变。在我个人的尝试中，我没能做到这样的事情(遗憾的是)。我想到的最简单的事情就是在单击它们后监听类的变化(在网络检查器上亲自查看)。然而this article 和 this article 让我相信这种方法要么太麻烦，要么根本不可能。

因此，请尝试选项 1，看看它对您有何帮助，否则值得提出一个关于如何在外部 JS 文件结束后实现事件监听器的新问题。