dynamically hiding a portion of a HTML table

Question

I have a table of data from mysql rendered on page via PHP into a HTML table.

Within this table of data, I have a row of data that should be focussed on (let's call it) row X.

I want the 2 rows above and below row X to be shown but all others hidden, as row X moves up and down, this would change (obviously) what was hidden, when row X is at the top/bottom I want to show 4 rows below/above.

I have done this with static content and JQuery, I am just unsure how to track row X and then apply the class names as required

Answer 1

You can show hide the normal way and based on the current row in focus change the innerHtml of the div in focus. Lets say there are 4 divs holding four rows of data then if focus is on div 2 then it will contain row 2 data in inner html. As focus move or onchange the content in div 2 will keep changing based on which row is in focus. I hope the drift helps

Answer 2

You could give each row a class name, and set a click event handler. When the user clicks for the first time, hide the entire table except for the clicked row and four below if row < 4, four above if row > row.last-4, or two above and two below (if neither of the foregoing is true).

Basically it's dom manipulation so I'd take a look at the prev() and next() functions if I were you. You can get the number of rows in the table by doing, for example, $("table > tr").length.

Noah

Answer 3

I thought this was an interesting request so I threw up an example here. The interesting part is the selectors to select the siblings to display. Here is a function i wrote.

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 4

Okay I have wrote an example that illustrates selecting different rows. Enter a number into the box (1 - 10) and click the button. Rows 1 or 10 will be shown (here you will change your class with jQuery or whatever) with one row above or below. Selecting other numbers (2 - 9) will show its self, and show one row above and one below.

Obvously this isn't exactly what you asked for - but it should illustrate the logic of how this can be done...

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>