Conditional CSS application on tables?

[bigcougar]

Probably I am not doing this the right way so any ideas will be welcome.

I have a table on a page, which is hard coded in HTML. It has 420 rows.
The page is loaded from a database by an AJAX request.

http://www.troutsalmonchar.com/Pages/STOCKS_LAKES_BC.php
(to retrieve records please enter "Savona" or "Kamloops" in the town box)

I applied CSS on the table which made it visible and the row height is fixed.

What I want to get is, have the table invisible, and when loaded, only the rows containing data should be subjected to the CSS.

I guess if my table was generated in PHP and added to the page this could be achieved without any problem, but it would mean reloading the page.......

Any ideas?

 

[smoovo]

You are asking a good question.

I see that the table built itself by PHP, and after clicking on the "Find" button the results inserted to table rows by Javascript (and AJAX of course).

My way:
1. Your classes .odd and .even should get display:none; for reseting (inside the CSS file).
2. After "Find" button been clicked, and results get in, you should store the results number in "new variable" (with Javascript).
3. New function will process storing new style.display='block' to <tr> multiply by your "new variable" (with Javascript).

The function mentioned above will work with child node DOM. If i had your script attached, maybe i could be more specific.