动态隐藏HTML表的一部分 [英] Dynamically hiding a portion of a HTML table

问题描述

我有一个数据表，从mysql在页面上通过PHP呈现到HTML表中。

I have a table of data from mysql rendered on page via PHP into a HTML table.

在这个数据表中，我有一行数据应该集中在（我们称之为）行X上。

Within this table of data, I have a row of data that should be focussed on (let's call it) row X.

我希望显示行X上方和下方的2行，但是所有其他行都是隐藏的，因为行X上下移动，当行X位于顶部/底部时，这将改变（显然）隐藏的内容我想在下面/上面显示4行。

I want the 2 rows above and below row X to be shown but all others hidden, as row X moves up and down, this would change (obviously) what was hidden, when row X is at the top/bottom I want to show 4 rows below/above.

我用静态内容和JQuery完成了这个，我只是不确定如何跟踪行X然后应用类名根据需要

I have done this with static content and JQuery, I am just unsure how to track row X and then apply the class names as required

推荐答案

我认为这是一个有趣的请求所以我抛出了一个这里的例子。有趣的部分是选择要显示的兄弟姐妹的选择器。这是我写的一个函数。

I thought this was an interesting request so I threw up an example here. The interesting part is the selectors to select the siblings to display. Here is a function i wrote.

function rowXMoved()
{
  // hide all rows besides rowX
  $('.tableCSS tr:not(.rowX)').hide();
  if($('.rowX').prev('tr').size() == 0)
  {
    // we are row number 1, show 4 more
    $('.rowX').siblings('tr:lt(4)').show(); //:lt is less than(index)
  }
  else if($('.rowX').next('tr').size() == 0)
  {
    // we are the last row
    // find the index of the tableRow to show.
    var rowCount = $('.tableCSS tr').size();
    $('.rowX').siblings('tr:gt(' + (rowCount - 6) +')').show(); //:gt is greater than(index)
  }
  else
  {
    // show 2 rows before and after the rowX
    // there is probably a better way, but this is the most straight forward
    $('.rowX').prev('tr').show().prev('tr').show();
    $('.rowX').next('tr').show().next('tr').show();
  }
}

这篇关于动态隐藏HTML表的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！