Javascript 删除隐藏表行上的空白

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

这是我的密码

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>

我曾尝试在Chrome开发工具中工作，并更改了一些CSS内容，以查看它是否能解决此问题，但迄今为止运气不佳。

您正在寻找：

table {
  border-collapse: collapse;
}

要查看更多信息，请转到

$（'.enrollment toggle'）。打开（'click'，函数（）{
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”）；
}否则{
$（此）.children（“i”）.removeClass（“fa-caret-down”）.addClass（“fa-caret-right”）；
}
});
$（'.table tr'）。每个（函数（）{
if（$（this.find（'td:empty'）.length）$（this.remove（）；
});
表格{
边界塌陷：塌陷；
}

index.html.erb
仪表板
逾期登记








注册
名字
姓
程序状态
最后付款日期
上次付款金额
收费总额
支付总额
应付总额
根据协议应付的金额
行动
注册
名字
姓
程序状态
最后付款日期
上次付款金额
收费总额
支付总额
应付总额
根据协议应付的金额
行动
注册
名字
姓
程序状态
最后付款日期
上次付款金额
收费总额
支付总额
应付总额
根据协议应付的金额
行动
注册
名字
姓
程序状态
最后付款日期
上次付款金额
收费总额
支付总额
应付总额
根据协议应付的金额
行动
注册
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);

table {
  border-collapse: collapse;
}

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

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