动态隐藏HTML表的一部分

Question

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

在这个数据表中，我有一行数据应该集中在(让我们称之为)行X。

我想要显示X行上面和下面的2行，但隐藏所有其他行，当X行上下移动时，这将改变(显然)隐藏的内容，当X行在顶部/底部时，我希望显示X行下面/上面4行。

我已经用静态内容和JQuery做到了这一点，我只是不确定如何跟踪行X，然后根据需要应用类名

Answer 1

我认为这是一个有趣的请求，所以我抛出了一个example here.，有趣的部分是用于选择要显示的兄弟项的选择器。这是我写的一个函数。

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

Answer 2

您可以以正常方式显示隐藏，并根据焦点中的当前行更改焦点中div的innerHtml。假设有4个div，包含4行数据，如果焦点在div 2上，那么它将包含内部html中的第2行数据。当焦点移动或更改时，div 2中的内容将根据焦点所在行的不同而不断变化。我希望这篇文章能有所帮助。

Answer 3

您可以为每行指定一个类名，并设置一个单击事件处理程序。当用户第一次单击时，隐藏整个表，除了被单击的行，如果行< 4，则隐藏下面四行，如果行> row.last-4，则隐藏上面四行，或者上面两行，下面两行(如果上述两项都不为真)。

基本上这是dom操作，所以如果我是您的话，我会看一下prev()和next()函数。例如，您可以通过执行$("table > tr").length来获得表中的行数。

诺亚