Hiding Table Columns with the Spry Element Selector

This sample shows how to use the Element Selector to select parts of a table and manipulate them

Note that Spry.$ (used in the changeText function) works like Prototype's "getElementById" convention and Spry.$$ is the Element Selector syntax.

Here are some samples. First:

In these samples, we use the Element Selector to do the alternating row colors.

 Spry.$$("tr:nth-child(2n+1)").addClassName("grayBG");

This selector adds the gray background to every even numbered row(2n), but doesn't count the first(+1), <th>, row. There is a sample on alternating row colors here and here.

This function is fired off after the page loads using the Spry.Utils.addLoadListener function. This activates the Selector after the page is loaded. We also added a 'hideRows' function call in there so the some table rows were hidden by default in the third sample.

Hide a single column

The "Hide Name" button triggers a function that is used to hide the 'Name' column. Using the 'nth-child' psuedo-selector, we specify the column we want to hide, in this case, the 3rd column. The selector should be read as "Select all <th> or <td> elements that are the 3rd child element of their parent, and toggle the 'hideIt' class name. Toggling will add the class if it is not there and remove it if it is.

Note that we have to specify both the <th> and <td> tags, since the first row uses <th>s We also specify '#first' so that we only affect the table with an id of 'first'. If we didn't add that to the selector, it would affect all the tables on the page.

Spry.$$("#first th:nth-child(3),#first td:nth-child(3)").toggleClassName("hideIt");

Then we use a function to toggle the button text.

Show/Hide more Detail

The "Hide Columns" button triggers a function that hides all the columns except the first 4.

Spry.$$("#second th:nth-child(n+5),#second td:nth-child(n+5)").toggleClassName("hideIt");

Show/Hide Table Rows

The "Show All Rows" button uses a function that toggle a group of rows on and off.

 Spry.$$("tr:nth-child(n+7) td").toggleClassName("hideIt");

In this function, we want to grab the row and not the column. So we use <tr> as the tag to select and use the nth-child to specify a particular starting row number. Then we add 'td' to the selector because we need to add the class to the <td>.

Notice that we are using 7 in the (n+7) notation. 'n' denotes every row and the +7 says 'start applying this rule on the 7th instance. 1 header row and 5 content rows is 6, so we want to start hiding the 7th row.

© 2007, Adobe Systems, Inc.