jQuery表行隱藏顯示 - 在每個表上單獨工作

Question

我正在嘗試構建一個將表行限制為10並添加鏈接以顯示更多內容的腳本 - 但我需要使用多個表來執行此操作。

我有類似http://jsfiddle.net/ot6fe3no/的東西，但當我點擊所有表格中添加的行時。

這是代碼：

 (function( $ ){
       $.fn.tablaraize = function() {

    var numShown = 5; // Initial rows shown & index
    var numMore = 5;  // Increment

    var $table2 = $(this);  // tbody containing all the rows

    var $table = $(this).find('tbody');  // tbody containing all the rows
    var numRows = $table.find('tr').length; // Total # rows


    // Hide rows and add clickable div
    $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
        .after('<tbody id="more"><tr><td colspan="' +
               $table.find('tr:first td').length + '"><div>Show more</div</tbody></td></tr>');

    $table2.find('#more').click(function() {
        numShown = numShown + numMore;
        // no more "show more" if done
        if (numShown >= numRows) {
            $table2.find('#more').remove();
        }
        $table.find('tr:lt(' + numShown + ')').show();
    });  

   }; })( jQuery );


    $('table').tablaraize();

Answer 1

只需更新你的小提琴

 (function( $ ){
       $.fn.tablaraize = function() {

    var numShown = 5; // Initial rows shown & index
    var numMore = 5;  // Increment

    var $table2 = $(this);  // tbody containing all the rows

    var $table = $(this).find('tbody');  // tbody containing all the rows
    var numRows = $table.find('tr').length; // Total # rows


    // Hide rows and add clickable div
    $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
        .after('<tbody id="more"><tr><td colspan="' +
               $table.find('tr:first td').length + '"><div>Show more</div</tbody></td></tr>');

    $table2.find('#more').click(function() {
        numShown = numShown + numMore;
        // no more "show more" if done
        if (numShown >= numRows) {
            $table2.find('#more').remove();
        }
       // $table.find('tr:lt(' + numShown + ')').show(); this will run on all table 
$(this).parent("table").find('tr:lt(' + numShown + ')').show(); // show the rows of current clicked 
    });  

   }; })( jQuery );


    $('table').tablaraize();

小提琴鏈接

Answer 2

感謝您的幫助，它正在運行，但我發現了兩個問題：1。當所有行都可見時，顯示更多不會消失，我修復它：

        // no more "show more" if done
        if (numShown+1 >= numRows) {
            //$table2.find('#more').remove();
            $(this).parent("table").find('#more').remove();
        }

2. 當有2行 - 顯示更多正在出現時，我無法找到解決方法