Question

在我的项目中，我在表格中显示联系信息。默认情况下，我会在表格中的某一行显示人员的核心信息。单击按钮可展开下一行以获取更多详细信息。

在我的表格中，我希望在默认视图中有交替的彩色行，其中所有细节行都会折叠。当扩展记录以显示包含详细信息的第二行时，我希望该行与父母的颜色相同，因为他们为同一个人提供了所有信息。

现在，在默认视图中，每一行都是相同的颜色，而详细视图行是交替的颜色，这会产生令人困惑的用户界面。

这是我的代码：

页面的HTML / Ruby：

<%- 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

检查rails cycle helper

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

您可以在第3行和第4行添加“偶数”类。

具有隐藏行的交替行颜色

1 个答案: