adamprocter adamprocter - 10 months ago 56
jQuery Question

Dynamically hiding a portion of a HTML table

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

Jab Jab
Answer Source

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)
    // show 2 rows before and after the rowX
    // there is probably a better way, but this is the most straight forward