javascript - jQuery, dynamically show table rows - Stack Overflow

Using a select form field with values of "10", "20", "30", how could you reveal / hide that number of tr rows in a table onchange of the dropdown?

Something like:

$("#rows").change(function(){

var num_rows = $(this).val();

$("#data tr").reveal(num_rows) (???)

});

EDIT: rows should be added / removed starting from the bottom of the table.

A sliding show / hide effect would be great.

Using a select form field with values of "10", "20", "30", how could you reveal / hide that number of tr rows in a table onchange of the dropdown?

Something like:

$("#rows").change(function(){

var num_rows = $(this).val();

$("#data tr").reveal(num_rows) (???)

});

EDIT: rows should be added / removed starting from the bottom of the table.

A sliding show / hide effect would be great.

• javascript
• jquery

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 20, 2011 at 22:14 stefstef 27.8k3131 gold badges107107 silver badges143143 bronze badges 4

• What (x)html mark-up are you working with? – David Thomas Commented Apr 20, 2011 at 22:20
• Can use any markup necessary, right now I just have an xhtml valid table with table, tbody, tr and td tags. No thead. Inside each cell is an img or span. – stef Commented Apr 20, 2011 at 22:22
• I can number the rows in a class attribute, that may be helpful – stef Commented Apr 20, 2011 at 22:23
• so apparently my solution before had a bug in it that chrome fixed (caught just now in ff) - fixed it, so give 'er a go :) – Demian Brecht Commented Apr 21, 2011 at 16:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

as kennis answered, use jQuery's slice() method.

I've put together a working example that you can try here: http://jsfiddle/a9TQ5/

HTML Markup:

<table id="mytable">
    <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        ...
    </tbody>
</table>

Javascript Code:

function show (min, max) {
    var $table = $('#mytable'), // the table we are using
         $rows = $table.find('tbody tr'); // the rows we want to select
    min = min ? min - 1 : 0;
    max = max ? max : $rows.length;
    $rows.hide().slice(min, max).show(); // hide all rows, then show only the range we want
    return false;    
}

Using this function you are able to control the number of rows in #mytable by using these examples:

show(); // show all rows
show(1, 10); // show rows 1 - 10
show(1, 20); // show rows 1 - 20
show(3, 7); // show rows 3 - 7
show(20); // show rows 20 and up

You can bind this function to the change on a <select> like so:

HTML:

<select id="limit">
    <option value="0">None</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="" selected>All</option>
</select>

Javascript:

$('#limit').bind('change', function () {
    show(0, this.value);
});

Let me know if this is what you had in mind...

I think this should work.

$("#rows").change(function(){

    var num_rows = $(this).val();

    $("#data tr").slice(num_rows).hide();

});

So, I needed a break from work so I decided to throw this together (hopefully I read your question correctly ;)):

$(document).ready(function(){
    $('#rows').change(function(){
        if($('#tbl tr').length !== parseInt($(this).val()))
        {
            (u = function(){
                if($('#tbl tr').length < parseInt($('#rows').val()))
                {
                    var id = $('#tbl tr').length;
                    var e = $('#tbl').append('<tr style="display: none;" id="'+id+'"><td>foo</td></tr>');
                    $('#'+id).fadeIn('fast', function(){
                        if($('#tbl tr').length < parseInt($('#rows').val())) u();
                    });
                }
                else if($('#tbl tr').length > parseInt($('#rows').val()))
                {
                    var id = $('#tbl tr').length-1;
                    $('#tbl #'+id).fadeOut('fast', function(){
                        $(this).remove();
                        if($('#tbl tr').length >= parseInt($('#rows').val())) u();
                    });
                }
            })();
        }
    });
});

Using this, you can reveal/hide any number of rows in a table with nifty little tail calling fade in and outs.

Of course, this was quickly hacked together and there's all kinds of optimizations that could be done.

Fiddle sample here