javascript - jQuery, dynamically show table rows - Stack Overflow

admin2025-03-09 21

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.

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Apr 20, 2011 at 22:14 stef 27.8k31 gold badges107 silver badges143 bronze badges

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1741461189a162393.html

javascriptJquery

dynamically show table rowsStack Overflow

最新回复(0)