动态隐藏HTML表的一部分

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

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

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

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

Answer 1

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

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来获取表中的行数。

诺亚

Answer 4

好的，我写了一个例子来说明选择不同的行。 在框中输入一个数字（1 – 10），然后单击按钮。 将显示第1行或第10行（此处您将使用jQuery或其他任何内容更改您的类），上面或下面有一行。 选择其他数字（2 – 9）将显示其自身，并在上方和下方显示一行。

显然这不是你要求的 – 但它应该说明如何做到这一点的逻辑……

 Enter row:    
 
Row 1
 
Row 2
 
Row 3
 
Row 4
 
Row 5
 
Row 6
 
Row 7
 
Row 8
 
Row 9
 
Row 10