0
私は、クライアントにさまざまなものの登録があり、詳細がテーブルに表示されるシステムを持っています。複数の登録を持つクライアントに、他の登録を表示するためのクリック可能なドロップダウンがある表の行を持つように設定しました。ただし、行のドロップダウンが最初にクリックされていないときは、隠れた行の表に空白行があります。この空白を削除するにはどうしたらいいですか？ここで隠しテーブル行の空白を削除する
私のコードです。
Javascriptを：
$('.enrollment-toggle').on('click', function() {
console.log($(this).data('client-id'));
if ($(this).children('i').hasClass('fa-caret-right')) {
$(this).children("i").removeClass("fa-caret-right").addClass("fa-caret-down");
} else {
$(this).children("i").removeClass("fa-caret-down").addClass("fa-caret-right");
}
});
$('.table tr').each(function() {
if ($(this).find('td:empty').length) $(this).remove();
});
$('.table tr').each(function() {
if ($(this).find('td:empty').length) $(this).css("display","none")
});
HTML：ここ
index.html.erb
<section class="row">
<section class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</section>
</section>
<input type="text" id="searchable-dashboard-table" class="form-control" placeholder="Search dashboard table.. (case sensitive)" style="margin-bottom:10px;">
<section class="row">
<section class="col-lg-12">
<section class="panel panel-default">
<section class="panel-heading">
<h3 class="panel-title">Past Due Enrollments</h3>
<div class="pull-right">
<div class="btn-group actions">
<%= link_to '<i class="fa fa-file-excel-o"></i> Export All Tabs'.html_safe, dashboards_path(format: 'xlsx'), class: 'btn btn-primary' %>
</div>
</div>
</section>
<section class="panel-body">
<section role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#current" aria-controls="current" role="tab" data-toggle="tab">Current</a></li>
<li role="presentation"><a href="#30days" aria-controls="30days" role="tab" data-toggle="tab">30 Days</a></li>
<li role="presentation"><a href="#60days" aria-controls="60days" role="tab" data-toggle="tab">60 Days</a></li>
<li role="presentation"><a href="#90days" aria-controls="90days" role="tab" data-toggle="tab">90 Days</a></li>
<li role="presentation"><a href="#120days" aria-controls="120days" role="tab" data-toggle="tab">120+ Days</a></li>
<li role="presentation"><a href="#no-payments" aria-controls="no-payments" role="tab" data-toggle="tab">No Payments</a></li>
</ul>
<!-- Tab panes -->
<section class="tab-content">
<section role="tabpanel" class="tab-pane active" id="current">
<section class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>Enrollment</th>
<th>First Name</th>
<th>Last Name</th>
<th>Program Status</th>
<th>Last Payment Date</th>
<th>Last Payment Amount</th>
<th>Total Amount Charged</th>
<th>Total Amount Paid</th>
<th>Total Amount Due</th>
<th>Amount Due Per Agreement</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<%= render partial: 'enrollment', collection: @current_enrollments %>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><%= number_to_currency @current_enrollments_totals[:last_payment_total] %></td>
<td><%= number_to_currency @current_enrollments_totals[:total_amount_charged_total] %></td>
<td><%= number_to_currency @current_enrollments_totals[:total_amount_paid_total] %></td>
<td><%= number_to_currency @current_enrollments_totals[:total_amount_due_total] %></td>
<td><%= number_to_currency @current_enrollments_totals[:total_amount_paid_total] %></td>
<td class='actions'>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
<section role="tabpanel" class="tab-pane" id="30days">
<section class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>Enrollment</th>
<th>First Name</th>
<th>Last Name</th>
<th>Program Status</th>
<th>Last Payment Date</th>
<th>Last Payment Amount</th>
<th>Total Amount Charged</th>
<th>Total Amount Paid</th>
<th>Total Amount Due</th>
<th>Amount Due Per Agreement</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<%= render partial: 'enrollment', collection: @thirty_day_enrollments %>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><%= number_to_currency @thirty_day_enrollments_totals[:last_payment_total] %></td>
<td><%= number_to_currency @thirty_day_enrollments_totals[:total_amount_charged_total] %></td>
<td><%= number_to_currency @thirty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td><%= number_to_currency @thirty_day_enrollments_totals[:total_amount_due_total] %></td>
<td><%= number_to_currency @thirty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td class='actions'>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
<section role="tabpanel" class="tab-pane" id="60days">
<section class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>Enrollment</th>
<th>First Name</th>
<th>Last Name</th>
<th>Program Status</th>
<th>Last Payment Date</th>
<th>Last Payment Amount</th>
<th>Total Amount Charged</th>
<th>Total Amount Paid</th>
<th>Total Amount Due</th>
<th>Amount Due Per Agreement</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<%= render partial: 'enrollment', collection: @sixty_day_enrollments %>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><%= number_to_currency @sixty_day_enrollments_totals[:last_payment_total] %></td>
<td><%= number_to_currency @sixty_day_enrollments_totals[:total_amount_charged_total] %></td>
<td><%= number_to_currency @sixty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td><%= number_to_currency @sixty_day_enrollments_totals[:total_amount_due_total] %></td>
<td><%= number_to_currency @sixty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td class='actions'>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
<section role="tabpanel" class="tab-pane" id="90days">
<section class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>Enrollment</th>
<th>First Name</th>
<th>Last Name</th>
<th>Program Status</th>
<th>Last Payment Date</th>
<th>Last Payment Amount</th>
<th>Total Amount Charged</th>
<th>Total Amount Paid</th>
<th>Total Amount Due</th>
<th>Amount Due Per Agreement</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<%= render partial: 'enrollment', collection: @ninty_day_enrollments %>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><%= number_to_currency @ninty_day_enrollments_totals[:last_payment_total] %></td>
<td><%= number_to_currency @ninty_day_enrollments_totals[:total_amount_charged_total] %></td>
<td><%= number_to_currency @ninty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td><%= number_to_currency @ninty_day_enrollments_totals[:total_amount_due_total] %></td>
<td><%= number_to_currency @ninty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td class='actions'>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
<section role="tabpanel" class="tab-pane" id="120days">
<section class="table-responsive">
</section>
<table class="table">
<thead>
<tr>
<th></th>
<th>Enrollment</th>
<th>First Name</th>
<th>Last Name</th>
<th>Program Status</th>
<th>Last Payment Date</th>
<th>Last Payment Amount</th>
<th>Total Amount Charged</th>
<th>Total Amount Paid</th>
<th>Total Amount Due</th>
<th>Amount Due Per Agreement</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<%= render partial: 'enrollment', collection: @one_twenty_day_enrollments %>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><%= number_to_currency @one_twenty_day_enrollments_totals[:last_payment_total] %></td>
<td><%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_charged_total] %></td>
<td><%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td><%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_due_total] %></td>
<td><%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_paid_total] %></td>
<td class='actions'>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
<section role="tabpanel" class="tab-pane" id="no-payments">
<section class="table-responsive">
<table class="table">
<thead>
<tr>
<th></th>
<th>Enrollment</th>
<th>First Name</th>
<th>Last Name</th>
<th>Program Status</th>
<th>Last Payment Date</th>
<th>Last Payment Amount</th>
<th>Total Amount Charged</th>
<th>Total Amount Paid</th>
<th>Total Amount Due</th>
<th>Amount Due Per Agreement</th>
<th class="actions">Actions</th>
</tr>
</thead>
<tbody>
<%= render partial: 'enrollment', collection: @no_payment_enrollments %>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><%= number_to_currency @no_payment_enrollments_totals[:last_payment_total] %></td>
<td><%= number_to_currency @no_payment_enrollments_totals[:total_amount_charged_total] %></td>
<td><%= number_to_currency @no_payment_enrollments_totals[:total_amount_paid_total] %></td>
<td><%= number_to_currency @no_payment_enrollments_totals[:total_amount_due_total] %></td>
<td><%= number_to_currency @no_payment_enrollments_totals[:total_amount_paid_total] %></td>
<td class='actions'>
</td>
</tr>
</tfoot>
</table>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
_enrollment.html.erb
<% client_enrollment_ids = enrollment.client.client_enrollments.pluck(:id) rescue [] %>
<% if @enrollments_ids.include?(enrollment.id) %>
<tr class="client-enrollment-<%= enrollment.id %>">
<td>
<% if client_enrollment_ids.length > 1 %>
<a class="enrollment-toggle" data-toggle="collapse" data-target=".collapseEnrollment-<%= enrollment.client.id %>" aria-expanded="false" aria-controls="collapseEnrollment-<%= enrollment.client.id %>" data-client-id="<%= enrollment.client.id %>">
<i class="fa fa-caret-right" aria-hidden="true"></i>
</a>
<% end %>
</td>
<td><%= enrollment.name %></td>
<td><%= enrollment.try(:client).try(:first_name) %></td>
<td><%= enrollment.try(:client).try(:last_name) %></td>
<td><%= enrollment.try(:program_status).try(:status) %></td>
<td><%= ldate enrollment.last_payment_date %></td>
<td><%= number_to_currency enrollment.last_payment_amount %></td>
<td><%= number_to_currency enrollment.total_amount_charged %></td>
<td><%= number_to_currency enrollment.total_amount_paid %></td>
<td><%= number_to_currency enrollment.total_amount_due %></td>
<td><%= number_to_currency enrollment.payment_agreement_amount %></td>
<td class='actions'>
<div class="btn-group">
<%= link_to 'Action', '#', title: 'View Record', data: { toggle: 'dropdown' }, class: 'btn btn-primary' %>
<%= link_to '<span class="caret"></span>'.html_safe, '#', data: { toggle: 'dropdown' }, title: 'More Actions', class: 'btn btn-primary dropdown-toggle' %>
<ul class="dropdown-menu">
<% if enrollment.client %>
<li><%= link_to '<i class="fa fa-eye"></i> Show'.html_safe, service_provider_client_client_enrollment_path(enrollment.service_provider, enrollment.client, enrollment), title: 'View Record' %></li>
<% end %>
</ul>
</div>
</td>
</tr>
<% enrollment.client.client_enrollments.where("client_enrollments.id != ?", enrollment.id).each do |e| %>
<tr class="secondary-enrollments collapse card card-block client-enrollment-<%= e.id %> collapseEnrollment-<%= e.client.id %>">
<td><i class="fa fa-angle-right secondary-enrollment-indicator"></i></td>
<td><%= e.name %></td>
<td><%= e.try(:client).try(:first_name) %></td>
<td><%= e.try(:client).try(:last_name) %></td>
<td><%= e.try(:program_status).try(:status) %></td>
<td><%= ldate e.last_payment_date %></td>
<td><%= number_to_currency e.last_payment_amount %></td>
<td><%= number_to_currency e.total_amount_charged %></td>
<td><%= number_to_currency e.total_amount_paid %></td>
<td><%= number_to_currency e.total_amount_due %></td>
<td><%= number_to_currency e.payment_agreement_amount %></td>
<td class='actions'>
<div class="btn-group">
<%= link_to 'Action', '#', title: 'View Record', data: { toggle: 'dropdown' }, class: 'btn btn-primary' %>
<%= link_to '<span class="caret"></span>'.html_safe, '#', data: { toggle: 'dropdown' }, title: 'More Actions', class: 'btn btn-primary dropdown-toggle' %>
<ul class="dropdown-menu">
<% if e.client %>
<li><%= link_to '<i class="fa fa-eye"></i> Show'.html_safe, service_provider_client_client_enrollment_path(e.service_provider, e.client, e), title: 'View Record' %></li>
<% end %>
</ul>
</div>
</td>
</tr>
<% end %>
<% end %>
がためのJSコードですそれらのテーブル内で検索します。
dashboard.js
var searchTable = function(event) {
var searchText = event.target.value;
console.log(searchText);
var $tableBody = $("table tbody tr");
// Show only matching TR, hide rest of them
$tableBody.each(function(index, row) {
var hasMatch;
var $row = $(row).text();
hasMatch = ($row.includes(searchText));
hasMatch ? $(this).show() : $(this).hide()
});
}
$("#searchable-dashboard-table").keyup(searchTable);
私はクローム開発ツール内で作業し、それがこの問題を解決するだろうかどうかを確認するためにいくつかのCSSの事を変更しようとしたが、運これまでにしています。
これは、検索バーに値がないテーブルでも機能しましたが、ポストされたイメージのような検索バーに値が存在する場合、空の行が表示されます。 –
申し訳ありませんが、ここから何が起こっているのか分かりにくいので、私は推測します。 .css（ "display"、 "none"）で追加したスクリプトは、ロード時に実行され、既存のすべてのタグ（table tr）に影響しますが、検索バーにテキストを入力すると、おそらくtrが動的に読み込まれます。これは、新しい生成された（ブランクの）trを除外できるように、検索テキストをキャッチするイベントの中に同じスクリプトを張る必要があるかもしれないことを意味します。 –
検索バーがイベントをトリガーする場所はわかりません。関数の中に新しいコードを貼り付けて、必要な場所に呼び出すことができれば、少し洗練されたものになるかもしれません。 –