2

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

2
  • Do you want to have all the data on the page, and show/hide rows dynamically with javascript, or do you want to only bring back 5 rows on the page from MySQL?
    – Tom Ritter
    Jul 1, 2009 at 15:35
  • I want all the data on the page please Jul 1, 2009 at 15:37

4 Answers 4

6

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();
  }
}
5
  • This is fantastic ! WOW I had been scratching my brain for a little while on this one. I am adjusting to fit my need and will how working version asap Jul 1, 2009 at 17:40
  • one additional question, I would like to add a button to show all Jul 1, 2009 at 17:50
  • just noticed the table headers are hidden anyway I can keep them always visible - thanks again Jul 1, 2009 at 18:01
  • just gave the header rowX class, have yet to work out show all link, and clicking on the table adjusts it anyway for it not to be a click function ? Jul 1, 2009 at 23:03
  • If you are asking if it can not be a click function, yes. You could have a textbox where you enter the row number and when clicked it could attach rowX class to the row number entered...
    – Jab
    Jul 2, 2009 at 12:30
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

1

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.