在我的项目中，我在表格中显示联系信息。默认情况下，我在表格的一行中显示该人的核心信息。单击按钮可展开下一行以获取更多详细信息。
在我的表格中，我希望在所有详细信息行都折叠的默认视图中交替显示彩色行。当扩展记录以显示包含详细信息的第二行时，我希望该行与其父行颜色相同，因为它们都是同一个人的信息。
现在在默认视图中，每一行都是相同的颜色，而详细视图行是交替的颜色，这使得用户界面混乱。
这是我的代码：
页面的 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">×</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);
});
});
});
非常感谢所有帮助。