隱藏行的交替行顏色

Question

在我的項目中，我在表格中顯示聯繫信息。默認情況下，我在表格中顯示連續人員的核心信息。點擊按鈕可展開下一行以獲取更多詳細信息。

在我的表中，我希望在默認視圖中交替顯示所有細節行都摺疊的彩色行。當記錄展開後，顯示第二行的詳細信息時，我希望該行與它的父級相同，因爲它們都是同一個人的信息。

現在在默認視圖中，每行都是相同的顏色，細節視圖行是交替的顏色，這會造成混淆的用戶界面。

這裏是我的代碼：

HTML /紅寶石頁：

<%- model_class = Person -%> 
    <div class="page-header detail"> 
     <h4>Search Results</h4> 
    </div> 

    <table class="table detail table-striped"> 
     <tbody> 
      <% @people.each do |person| %> 
      <tr class="parent"> 
       <td><%= image_tag "photo-1.png", :height => '32', :width => '40' %></td> 
       <td><%= link_to person.lname + ", " + person.fname, person %><br> <%= person.ntid %><br> 

        <td><%= number_to_phone(person.phone, :area_code => true) %><br><%= mail_to person.email %></td> 
        <td>Suite: <%= person.suite %><br>Column: <%= person.column %></td> 

        <td><!-- lightbox code --> 
         <a data-toggle="lightbox" href="#<%= person.id %>Lightbox"><%= image_tag "map_icon1.png", :width => '32' %> </a> 
         <div id="<%= person.id %>Lightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
          <div class='lightbox-header'> 
           <button type="button" class="close" data-dismiss="lightbox" aria-hidden="true">&times;</button> 
          </div> 
          <div class='lightbox-content'> 
           <%=image_tag person.map %> 
          </div> 
         </div> 
         <!-- end lightbox code --> 
         </td> 

         <!-- Dropdown button --> 
         <td><a class="dropme" href="#<%= person.id %>"> <button class="btn btn-info btn-small"> 
          <i class="icon-chevron-down"></i> 
         </button></a></td> 

        <!-- end dropdown button --> 


        <tr class="child"> 
         <td></td> 
         <td>Title: <%= person.title %><br>Department: <%= person.department %><br>Manager: <%= person.manager %><br>Direct Reports: <%= person.direct_report %></td> 
         <td>Mobile: <%= number_to_phone(person.mobile, :area_code => true) %><br>FAX: <%= number_to_phone(person.fax, :area_code => true) %><br>Pager: <%= number_to_phone(person.pager, :area_code => true) %></td><td><%= person.company %><br><%= person.office %><br><%= person.address %><br><%= person.city %>, <%= person.state %> <%= person.zipcode %><br><%= person.country %></td> 
         <td><td> <!-- empty cell to have things line up --> 
         <td><td> <!-- empty cell to have things line up --> 
         <td><td> <!-- empty cell to have things line up --> 
        </tr> 


       <!-- <td> 
       <%= link_to t('.edit', :default => t("helpers.links.edit")), 
       edit_person_path(person), :class => 'btn btn-mini' %> 
       <%= link_to t('.destroy', :default => t("helpers.links.destroy")), 
       person_path(person), 
       :method => :delete, 
       :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) }, 
       :class => 'btn btn-mini btn-danger' %> 
       </td> --> 
      <!-- </tr> --> 
      <% end %> 

     </tbody> 
    </table> 

我的JavaScript的展開和摺疊行是：

$(document).ready(function(){ 
$('table.detail').each(function() { 
    var $table = $(this); 
      $('tbody tr .dropme').click(function(event){ 
       var $tgt=$(event.target); 
       event.stopPropagation(); 
       var closestRow=$tgt.closest('tr'); 
       // closestRow.siblings('.child').eq(0).toggle(); 
       closestRow.next().toggle('slow'); 
       var pcolor=closestRow.css("background-color"); 
       closestRow.next().css('background-color', pcolor); 
      }); 
     }); 
    }); 

所有幫助是極大的讚賞。

Answer 1

退房軌道週期幫手

http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-cycle

您可以到「偶數」類添加到第三和第四行。