Php 动态隐藏HTML表的一部分

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

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

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

---

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

您可以使用正常方式显示隐藏，并根据当前焦点行更改焦点中div的innerHtml。

---

假设有4个div包含4行数据，那么如果焦点是div2，那么它将在内部html中包含第2行数据。当焦点移动或更改时，div2中的内容将根据焦点所在的行不断更改。我希望漂移有帮助

您可以以正常方式显示隐藏，并根据当前焦点行更改焦点中div的innerHtml。

---

假设有4个div包含4行数据，那么如果焦点是div2，那么它将在内部html中包含第2行数据。当焦点移动或更改时，div2中的内容将根据焦点所在的行不断更改。我希望漂移有帮助

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

基本上这是dom操作，所以如果我是你，我会看看prev（）和next（）函数。您可以通过执行，例如，$（“table>tr”）.length来获取表中的行数

---

Noah

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

基本上这是dom操作，所以如果我是你，我会看看prev（）和next（）函数。您可以通过执行，例如，$（“table>tr”）.length来获取表中的行数

---

Noah

我认为这是一个有趣的请求，所以我提出了一个有趣的问题，那就是选择要显示的兄弟姐妹的选择器。这是我写的一个函数

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

---

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

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

---

好的，我已经写了一个例子来说明如何选择不同的行。在框中输入一个数字（1-10），然后单击按钮。第1行或第10行将显示（这里您将使用jQuery或其他工具更改您的类），上面或下面各有一行。选择其他数字（2-9）将显示其自身，并显示上面一行和下面一行

很明显，这并不完全是你所要求的-但它应该说明如何做到这一点的逻辑

Enter row:
<input id="Text1" type="text" />

<input id="Button1" type="button" value="button" onClick="updateTable()"/>

<!-- Example table, note the Ids -->
<table id="yourTable">
    <tr><td id="row1">Row 1</td></tr>
    <tr><td id="row2">Row 2</td></tr>
    <tr><td id="row3">Row 3</td></tr>
    <tr><td id="row4">Row 4</td></tr>
    <tr><td id="row5">Row 5</td></tr>
    <tr><td id="row6">Row 6</td></tr>
    <tr><td id="row7">Row 7</td></tr>
    <tr><td id="row8">Row 8</td></tr>
    <tr><td id="row9">Row 9</td></tr>
    <tr><td id="row10">Row 10</td></tr>
</table>

<script type="text/javascript">

    function updateTable()
    {
        var table = document.getElementById('yourTable');
        var row = parseInt(document.getElementById('Text1').value);
        var rows = table.rows.length;

        // Reset the classes, styles etc etc for each row
        for (var i = 0; i < rows; i++) {
            table.rows[i].style.visibility = 'hidden';
        }

        // Subtract one as we start from 0.
        row = row - 1;

        // Top row, select the first and one below.
        if (row == 0) {
            table.rows[0].style.visibility = 'visible';
            table.rows[1].style.visibility = 'visible';
        }

        // Rows in between. Select the middle, one above and one below.
        if ((row > 0) && (row < rows - 1)) {
            table.rows[row - 1].style.visibility = 'visible';
            table.rows[row].style.visibility = 'visible';
            table.rows[parseInt(row + 1)].style.visibility = 'visible';
        }

        // Bottom row, select the last row and one above that.
        if (row == rows - 1) {
            table.rows[row].style.visibility = 'visible';
            table.rows[row - 1].style.visibility = 'visible';
        }
    }


</script>

输入行：
一排
第2排
第3排
第4排
第5行
第6行
第7排
第8行
第9行
第10行
函数updateTable（）
{
var table=document.getElementById（'yourTable'）；
var row=parseInt（document.getElementById（'Text1'）.value）；
变量行=table.rows.length；
//重置每行的类、样式等
对于（变量i=0；i0）和&（行<行-1））{
table.rows[row-1].style.visibility='visible'；
table.rows[row].style.visibility='visible'；
table.rows[parseInt（row+1）].style.visibility='visible'；
}
//在最下面一行中，选择最后一行和上面一行。
如果（行==行-1）{
table.rows[row].style.visibility='visible'；
table.rows[row-1].style.visibility='visible'；
}
}

好的，我已经编写了一个示例，说明如何选择不同的行。在框中输入一个数字（1-10），然后单击按钮。第1行或第10行将显示（这里您将使用jQuery或其他工具更改您的类），上面或下面各有一行。选择其他数字（2-9）将显示其自身，并显示上面一行和下面一行

很明显，这并不完全是你所要求的-但它应该说明如何做到这一点的逻辑

Enter row:
<input id="Text1" type="text" />

<input id="Button1" type="button" value="button" onClick="updateTable()"/>

<!-- Example table, note the Ids -->
<table id="yourTable">
    <tr><td id="row1">Row 1</td></tr>
    <tr><td id="row2">Row 2</td></tr>
    <tr><td id="row3">Row 3</td></tr>
    <tr><td id="row4">Row 4</td></tr>
    <tr><td id="row5">Row 5</td></tr>
    <tr><td id="row6">Row 6</td></tr>
    <tr><td id="row7">Row 7</td></tr>
    <tr><td id="row8">Row 8</td></tr>
    <tr><td id="row9">Row 9</td></tr>
    <tr><td id="row10">Row 10</td></tr>
</table>

<script type="text/javascript">

    function updateTable()
    {
        var table = document.getElementById('yourTable');
        var row = parseInt(document.getElementById('Text1').value);
        var rows = table.rows.length;

        // Reset the classes, styles etc etc for each row
        for (var i = 0; i < rows; i++) {
            table.rows[i].style.visibility = 'hidden';
        }

        // Subtract one as we start from 0.
        row = row - 1;

        // Top row, select the first and one below.
        if (row == 0) {
            table.rows[0].style.visibility = 'visible';
            table.rows[1].style.visibility = 'visible';
        }

        // Rows in between. Select the middle, one above and one below.
        if ((row > 0) && (row < rows - 1)) {
            table.rows[row - 1].style.visibility = 'visible';
            table.rows[row].style.visibility = 'visible';
            table.rows[parseInt(row + 1)].style.visibility = 'visible';
        }

        // Bottom row, select the last row and one above that.
        if (row == rows - 1) {
            table.rows[row].style.visibility = 'visible';
            table.rows[row - 1].style.visibility = 'visible';
        }
    }


</script>

输入行：
一排
第2排
第3排
第4排
第5行
第6行
第7排
第8行
第9行
第10行
函数updateTable（）
{
var table=document.getElementById（'yourTable'）；
var row=parseInt（document.getElementById（'Text1'）.value）；
变量行=table.rows.length；
//重置每行的类、样式等
对于（变量i=0；i0）和&（行<行-1））{
table.rows[row-1].style.visibility='visible'；
table.rows[row].style.visibility='visible'；
table.rows[parseInt（row+1）].style.visibility='visible'；
}
//最后一行，选择最后一行，然后