admin管理员组文章数量:1318335
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.
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.
Share Improve this question asked Jan 22, 2016 at 13:48 TraffyTraffy 2,86115 gold badges54 silver badges80 bronze badges 1-
Only do
$('#jTable tr:first').hide();
and$('#jTable tr:last').hide();
two times. on:last
first time hides 1st last then 2nd last will be your last andhide
that also. :D – Parth Trivedi Commented Jan 22, 2016 at 13:57
3 Answers
Reset to default 5You 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./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>
本文标签: javascriptjQueryFind the last and before last row in a tableStack Overflow
版权声明:本文标题:javascript - jQuery - Find the last and before last row in a table - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742040179a2417515.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论