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();

fiddle link

Answer 2

感谢您的帮助，它正在运作，但我发现了两个问题： 1.当所有行都可见时，显示更多不会消失，我用以下方法解决：

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

当有2行 - 显示更多行时，我无法找到解决方法

jQuery表行隐藏显示 - 在每个表上单独工作

2 个答案: