Dynamic item insertion messing up the zebra striping

Question

I have a simple list of products where zebra striping is achieved using the cycle method.

Here is the product partial:

<tr class="product <%= cycle 'odd', 'even' %>">
  <td><%= product.name %></td>
  <td><%= product.price %></td>
  <td><%= product.percentage %></td>
  <td><%= link_to "Show", product %></td>
  <td><%= link_to "Edit", edit_product_path(product), :remote => true %></td>
  <td><%= link_to "Destroy", product, :confirm => 'Are you sure?', :method => :delete, :remote => true %></td>
</tr>

However, when I dynamically insert another product, the cycle method logically picks the first class (in this case the "odd" class) thus breaking the striping until the next reload. Although dynamically reloading the entire product would work; this method seems somewhat dirty and would likely mess with the pagination. Since I'm still relatively new to JavaScript and Prototype I'm unable to come up with this on my own so I have to ask: Is there a way to get the class of the previous product ("odd" or "even") and add class to the newly inserted product accordingly?

My current UJS used to insert the partial:

Modalbox.hide();

function insertProduct() {
   $('products').insert( { top: "<%= escape_javascript(render @product) %>" } );
   $$('.product').first().highlight(); 
}

insertProduct.delay(0.8);

Any help would be much appreciated.

Thanks in advance.

Answer 1

Ionut Staicu is essentially right but has forgotten it's Prototype. Final answer should be;

$$('.product').invoke('removeClassName', 'odd')
              .invoke('removeClassName', 'even')
              .first().highlight(); 
$$('.product:even').invoke('addClassName', 'even');
$$('.product:odd').invoke('addClassName', 'odd');