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
edited Jun 20, 2020 at 9:12
CommunityBot111 silver badge
asked Apr 20, 2011 at 22:14
stefstef27.8k3131 gold badges107107 silver badges143143 bronze badges4
What (x)html mark-up are you working with?
– David Thomas
CommentedApr 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
CommentedApr 20, 2011 at 22:22
I can number the rows in a class attribute, that may be helpful
– stef
CommentedApr 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
CommentedApr 21, 2011 at 16:10
Add a ment
|
3 Answers
3
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/
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: