Written by Sean Behan on Sun Jun 17th 2012

There must be a better way to do the following with PrototypeJS. I want to loop over nested links inside of table td cells and apply a class to the row that the link is in when the link is clicked. If a user clicks on another link the class will be removed and applied to the current table row.

The code below works but I think it seems hackish. Any thoughts on improving this code?

Here is the link to the pastie http://pastie.org/703316

# This is the table with haml markup
%table
  %tr
    %td
       info
    %td
      = link_to "be clicked", remote_request_goes_here_path

And the Js

    $$("td.filter_link > a").each(function(element){
        Event.observe(element, "click", function(event){
            $$("td.filter_link").each(function(el){
                if(el != this){
                    el.up().removeClassName("turnwhite");
                }
            });
                       // apply the turnwhite class to the table row
            this.up().up().addClassName("turnwhite");
        });
    });

Tagged with..
#$$ #code optimization #javascript #nested #prototype #tables #td #javascript

Just finishing up brewing up some fresh ground comments...