Dynamic Table

Hi,
I have a table with multiple rows and columns. This table is about the different fruits a vendor is selling and different categories of the same fruit. The first row in every column is a main heading. The heading are something like this:

FRUIT NAME | DATE ORDERED | BEST BEFORE | PRICE

I want to design this table in such a way that the user clicks on the heading that matters most to him. The table rows are sorted in the chosen order on the table, with the bottom half grayed out. When they click on another column, which sorts the rows further and grays out more rejected items. Finally when one item remains, a "BUY NOW” button appears.

Is there a way I can do this using Javascript. It does not deal with Database. So iam not keen in using PHP & i am newbie to PHP. I would prefer something in Javascript. I looked around many tuts but to the maximum extent, they are showing how to delete & add rows manually. But none of them are so dynamic according to the description. The greying part of the irrelevant rows & columns is the main part. I want to achieve this. I have been working on this for 3 days now with now success.

Any help is this regard is highly appreciated. Thank you all.