Hide data and show to LIFO
Hide data and show according to LIFO
by Kabir Hossain
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<body>
<p>Hide data and show according to LIFO</p>
<a href="#" class="prev_row">show previous row</a>
<table>
<tr class="row">
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>
<a href="#">remove</a>
</td>
</tr>
<tr class="row">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
<a href="#">remove</a>
</td>
</tr>
<tr class="row">
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>
<a href="#">remove</a>
</td>
</tr>
<tr class="row">
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>
<a href="#">remove</a>
</td>
</tr>
<tr class="row">
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>
<a href="#">remove</a>
</td>
</tr>
</table>
</body>
JavaScript
$(function() {
var row_index = [];
var reverse_index = [];
var i = 0;
$('table tr td a').click(function() {
row_index[i++] = $(this).closest('tr').index();
$(this).closest(".row").hide();
});
$('.prev_row').click(function(){
$('.row').eq(row_index[--i]).show();
});
});