Question

我试图隐藏和显示表格行，以下工作但打破了布局，即空<td> s失去宽度有没有办法防止这种情况？

＆＃13;

$(document).on("click ", "tr.grey", function(e) {
  e.preventDefault();
  $( "tr.sales-details" ).removeClass( "show" );
  $(this).nextUntil(".grey").addClass( "show" );
});

＆＃13;

tbody tr.sales-details, tbody tr.sales-details-title{
  display: none;
  &.show{
    display: block;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" class="modal-table" id="modal-table">
  <thead>
    <tr><th>Surgeon name</th>
      <th>Country</th>
      <th>Antiquity</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr class="grey">
      <td>Alex Lloyd</td>
      <td>Spain</td>
      <td>new client</td>
      <td>2690.58 USD</td>
    </tr>
    <tr class="sales-details-title">
      <td></td>
      <td></td>
      <td><strong>Seller:</strong></td>
      <td><strong>Percentage:</strong></td>
    </tr>
    <tr class="sales-details">
      <td></td>
      <td></td>
      <td>Support</td>
      <td>2690.58 USD</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

尝试使用{visibility:hidden}和{visibility:visible}来隐藏或显示元素 - 这会隐藏内容但会保留在DOM中的位置，而不会导致重复/重新格式化：没有原因。

tbody tr.sales-details, tbody tr.sales-details-title{
  visibility: hidden;
  &.show{
    visibility:visible;
  }
}

隐藏/显示表行中断布局

1 个答案: