动态隐藏HTML表的一部分

Question

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

在这个数据表中,我有一行数据应该集中在(我们称之为)行X上.

我想要显示行X上方和下方的2行,但是其他所有其他都隐藏了,因为行X上下移动,这会改变(显然)隐藏的内容,当行X位于顶部/底部时我想要显示4行/低于/高于.

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

Answer 1

我认为这是一个有趣的请求所以我在这里举了一个例子. 有趣的部分是选择要显示的兄弟姐妹的选择器.这是我写的一个功能.

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