無論排序如何得到最後一個表格行？

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

$(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. 否則，

   一）從目前它的行刪除dropup類。

   b）將dropup CSS類添加到當前最後一個表中的行。

jQuery代碼：您dropup類是不是在你的jsfiddle指定

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

注意，所以我只能假設你已經提供了什麼。如果您有任何問題，請告訴我。

編輯

上面的代碼將無法正常工作。這是因爲bootstrap-sortable.js負責表格的排序。意思是，如果上面的點擊事件處理程序已經就位，那麼bootstrap-sortable.js將在完成後運行。

你有兩個選擇：

1. 通過在代碼中加入了新的功能添加dropup類，像我一樣在我的片段上方修改您的本地引導，sortable.js。我會首先嚐試在function doSort($this, $table){...}或任何您認爲合適的地方結束時調用它。

2. 你可以認爲沒問題，在bootstrap-sortable.js完成運行後需要發生什麼是可以理解的。也許正在尋找th中班級的變化，然後運行我上面寫的代碼片段。也許在聽某種事件要改變。在我個人的嘗試中，我一直無法做這樣的事情（可悲）。我認爲做的最簡單的事情是聽在th類的變化，你點擊它們（看到自己在你的網頁檢查）之後。然而，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