Dynamically hiding a portion of a HTML table - php

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

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 2

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 3

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 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>