Toggle row visibility one at a time
I have a couple of tables with similar structures like this:
<table>
<tbody>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr>
<tr>content</tr> ..etc
--- The fake button is added here
<div class="addrow">Add another</div>
</tbody>
</table>
UPDATE: All the rows have the same draggable class.
Since this is a long list, I have a need to toggle the rows one at a time. I just need to show the first row, of course, the rest should be toggled.
The action is when I click a dynamic fake button, it will show row no. 2, and clicking again will show another next row.
This is what I have done so far:
$("table#field_fruit_values tr.draggable").not(':first').hide();
$("table#field_vegetables开发者_运维知识库_values tr.draggable").not(':first').hide();
$("body.form table.content-multiple-table tbody").append('<div class="addrow">Add</div>');
$(".addrow").click(function() {
var hiddenRow = $(this).prev('tr.draggable');
$(this).prev(hiddenRow + 1).show();
//if (hiddenRow + ':last').length) { // <= silly logic
// $(this).hide();
//}
});
The button only works for one row. I must have done something wrong :)
When the final is reached, I also want the button to disappear.
Sorry if this question sound silly.
Any help would be very much appreciated.
Thanks.
You can do it a bit more concise with less DOM traversal like this:
$(".addrow").click(function() {
var row = $(this).prev("table").find("tr:hidden:first");
if(row.length) row.show();
else $(this).hide();
});
Also change your .append()
to .after()
to get valid html (a <div>
in a <tbody>
is invalid):
$("table.content-multiple-table").after('<div class="addrow">Add</div>');
prev(hiddenRow + 1)
hiddenRow
is a jQuery object.
You can't add one to that, as far as I know.
What you probably want to do is create a class called 'visible'. Each time you make a row visible, give it that class. Then, to find the last visible row:
$(this).closest('table').find('tr.visible').filter(':last')
精彩评论