I've got the following html table :
<table id="jTable">
<tr>
<td>No</td>
<td>Competition</td>
<td>John</td>
<td>Adam</td>
<td>Robert</td>
<td>Paul</td>
</tr> <tr>
<td>1</td>
<td>Swimming</td>
<td>1:30</td>
<td>2:05</td>
<td>1:15</td>
<td>1:41</td>
</tr> <tr>
<td>2</td>
<td>Running</td>
<td>15:30</td>
<td>14:10</td>
<td>15:45</td>
<td>16:00</td>
</tr> <tr>
<td>3</td>
<td>Shooting</td>
<td>70%</td>
<td>55%</td>
<td>90%</td>
<td>88%</td>
</tr> <tr>
<td>Total</td>
<td>Blablabla</td>
<td>1000</td>
<td>1000</td>
<td>1000</td>
<td>1000</td> </tr>
</table>
What I'm trying to do is to hide all the rows except for the first, the before last and the last one. Here's how I'm doing :
$('#jTable').find('tr:gt(0):not(:last)').slideToggle();
This jQuery script only keeps the first and last row. Knowing the fact that I must use jQuery 1.7.1 (so I can't use the nth-last-child property), I was looking for a way to select the before last row.
You can find the last
and before last
tr
using eq()
function like following.
var len = $('#jTable tr').length;
var first_row = $('#jTable tr').eq(0);
var last_row = $('#jTable tr').eq(len - 1);
var before_last_row = $('#jTable tr').eq(len - 2);
Update
$('#jTable tr').not(first_row).not(last_row).not(before_last_row).slideToggle();
Take these into a function and try.
$(document).ready(function(){ $('#jTable tr:first').slidetoggle() $('#jTable tr:last').slidetoggle() $('#jTable tr:last').prev().slidetoggle() })
You do not need to use find()
$(document).ready(function(){ $("#jTable tr").not($("#jTable tr:first")).not($("#jTable tr:last").prev()).slideToggle(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="jTable"> <tr> <td>No</td> <td>Competition</td> <td>John</td> <td>Adam</td> <td>Robert</td> <td>Paul</td> </tr> <tr> <td>1</td> <td>Swimming</td> <td>1:30</td> <td>2:05</td> <td>1:15</td> <td>1:41</td> </tr> <tr> <td>2</td> <td>Running</td> <td>15:30</td> <td>14:10</td> <td>15:45</td> <td>16:00</td> </tr> <tr> <td>3</td> <td>Shooting</td> <td>70%</td> <td>55%</td> <td>90%</td> <td>88%</td> </tr> <tr> <td>Total</td> <td>Blablabla</td> <td>1000</td> <td>1000</td> <td>1000</td> <td>1000</td> </tr> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.