删除隐藏表行上的空格

Question

我有一个系统，客户可以注册不同的东西，详细信息显示在表格中。我已将具有多个注册的客户端设置为具有可单击下拉列表的表行，以显示其他注册。但是，当最初未单击行下拉列表时，表中的空白行用于隐藏行。如何删除此空格？

这是我的代码。

使用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);

我曾尝试在Chrome开发工具中工作并更改一些CSS内容以确定是否可以解决此问题，但到目前为止还没有运气。

Answer 1

您在寻找：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
      $("#pp").addClass('prog_load')
    });
});

</script>

<style>

.button {
    background-color: #000000;
    border: none;
    cursor: pointer;
    color: #ff0000;
    padding: 8px 16px;
    text-align: center;
    display: inline-block;
    font-size: 12px;
    box-shadow: 2px 1px 4px #000000;
}

.button:active {
  background-color: #ff0000;
  color: #000000;
  box-shadow: 2px 1px 4px #000000;
  transform: translateY(2px);
}

.prog_bar {
  filter: grayscale(100%);
}


.prog_load {
filter: grayscale(0%);

transition: all 10s ease;


}

</style>
</head>
<body>
<button class = "button" id = "button"> Claik meh </button>
    <img src = imgurl class = "prog_bar" id = "pp">

</body>
</html>

要查看更多信息，请转到here。

＆＃13;

＆＃13;

table {
  border-collapse: collapse;
}

＆＃13;

$('.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();
});

＆＃13;

table {
  border-collapse: collapse;
}

＆＃13;

＆＃13;

＆＃13;

如果这不是您正在寻找的内容，那么将HTML作为纯HTML发布会很棒。

Answer 2

如果崩溃不起作用，也许可以试试造型＆＃34; tr＆＃34;显示：无

我认为你可以这样做：

$('.table tr').each(function() {
    if ($(this).find('td:empty').length) $(this).css("display","none")
});

评论的第二部分回答是因为评论没有格式化.---

很遗憾地说试试这个并试试但是...尝试$（this）.css（＆＃34;显示＆＃34;，＆＃34;无＆＃34;）而不是$（this）.hide （）......

$tableBody.each(function(index, row) { 
  var hasMatch; 
  var $row =  $(row).text(); 
  hasMatch = ($row.includes(searchText)); 
  hasMatch ? $(this).show() : $(this).css("display","none") 
})