【问题标题】:jQuery - Find the last and before last row in a tablejQuery - 查找表中的最后一行和最后一行
【发布时间】:2020-06-11 21:30:52
【问题描述】:

我有以下 html 表格:

<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>

我要做的是隐藏除第一行、最后一行和最后一行之外的所有行。这是我的做法:

$('#jTable').find('tr:gt(0):not(:last)').slideToggle();

这个 jQuery 脚本只保留第一行和最后一行。知道我必须使用 jQuery 1.7.1(所以我不能使用 nth-last-child 属性)这一事实,我正在寻找一种方法来选择最后一行。

【问题讨论】:

  • 只执行两次$('#jTable tr:first').hide();$('#jTable tr:last').hide();。在:last 第一次隐藏第一个最后一个然后第二个最后一个将是你的最后一个,hide 那也是。 :D

标签: javascript jquery html


【解决方案1】:

您可以使用eq() 函数找到lastbefore last tr,如下所示。

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);

更新

$('#jTable tr').not(first_row).not(last_row).not(before_last_row).slideToggle();

【讨论】:

  • downvoting 之前请告诉我我的问题。
  • 感谢您的回答。但是,我应该如何将变量用于 find() 函数?
  • 你不需要使用 find。您可以改用not。请参阅更新的答案。 @Traffy
  • 我不怪你:)。我向反对者询问我的问题。 @ParthTrivedi
  • 谢谢!但是,在我的情况下,我也需要保留第一行。这还有可能吗?
【解决方案2】:

将这些带入一个函数并尝试。

$(document).ready(function(){
 $('#jTable tr:first').slidetoggle()
 $('#jTable tr:last').slidetoggle()
 $('#jTable tr:last').prev().slidetoggle()
})

【讨论】:

  • 感谢您的回答。但是,我应该如何将变量用于 find() 函数?
【解决方案3】:

你不需要使用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>

【讨论】:

  • @Traffy 请检查我的答案。运行 sn-p。
  • 谢谢!但是,在我的情况下,我也需要保留第一行。这还有可能吗?
  • 请告诉我你需要哪一行? :first?然后从我的代码中排除该行。
  • @Traffy 你运行 sn-p 了吗?
猜你喜欢
  • 1970-01-01
  • 2012-12-21
  • 2017-06-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-09-30
相关资源
最近更新 更多