Question

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

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

我希望显示行X上方和下方的2行，但是所有其他行都隐藏起来，因为行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

您可以为每一行指定一个类名，并设置一个单击事件处理程序。当用户第一次点击时，隐藏整个表，除了点击的行，如果行＆lt; 4，如上所述四行＆gt; row.last-4，或者上面两个和下面两个（如果前面都没有）。

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

诺亚

Answer 4

好的，我写了一个例子来说明选择不同的行。在框中输入一个数字（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>

动态隐藏HTML表的一部分

4 个答案: