私のプロジェクトでは、連絡先情報を表に表示しています。デフォルトでは、その人物の主要な情報を表の行に表示しています。ボタンをクリックすると、次の行が展開されて詳細情報が表示されます。
私のテーブルでは、すべての詳細行が折りたたまれているデフォルト ビューに色付きの行を交互に表示したいと考えています。レコードを展開して 2 行目に詳細情報を表示する場合、行はすべて同じ人物の情報であるため、親と同じ色にする必要があります。
現在、デフォルト ビューでは各行が同じ色で、詳細ビューの行は交互の色になっているため、ユーザー インターフェイスがわかりにくくなっています。
これが私のコードです：
ページの 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);
});
});
});
すべてのヘルプは大歓迎です。