显示/过滤表格中的某些行

时间:2014-01-09 21:54:25

标签: jquery html-table rows

我正在尝试仅显示由以下代码生成的我的表格的某些行(例如只有两行):

function loadTable(){

    $.getJSON( 'sort.php', function( data ) {
        $('#mytable tbody tr').remove();
        $.each( data, function( i, val ) {
            $('#mytable tbody').append('<tr><td>'+val.value0+'</td><td>'+val.value1+'</td><td>'+val.value2+'kb/'+val.value3+'kb</td><td>10:59 08/01/2014</td></tr>');
        });
    });

    $('#mytable tbody').hide();
    $('#mytable tr').slice(0, 2).show();
    setTimeout("loadTable()",15000);
  }

但是这段代码只能用于隐藏功能而不是show。有什么帮助吗?

2 个答案:

答案 0 :(得分:0)

在将行添加到页面之前,您无法显示行。

function loadTable(){

    var tbody = $('#mytable tbody').hide();

    $.getJSON( 'sort.php', function( data ) {
        tbody.empty();
        $.each( data, function( i, val ) {
            tbody.append('<tr><td>'+val.value0+'</td><td>'+val.value1+'</td><td>'+val.value2+'kb/'+val.value3+'kb</td><td>10:59 08/01/2014</td></tr>');
        });

        tbody.find("tr").hide().slice(0, 2).show();
        tbody.show();
        setTimeout(loadTable,15000);


    });

  }

答案 1 :(得分:0)

问题可能是您隐藏了父级,然后尝试显示该子级。

$('#mytable tbody').hide();
$('#mytable tr').slice(0, 2).show();

相反,只需隐藏您不想显示的子行。

$('#mytable tr').slice(2, $('#mytable tr').length).hide();

http://jsfiddle.net/B8MzM/