引导表如何隐藏，当使用 javascript 切换可见时，它无法正确显示

Posted 2023-05-07

【中文标题】引导表如何隐藏，当使用 javascript 切换可见时，它无法正确显示

【英文标题】：Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

【发布时间】：2017-02-24 04:08:40

【问题描述】：

我有一个引导表。我最初使用 css 来隐藏其中一个表行。我有一个复选框，如果它被选中，我想显示隐藏的表格行，否则它不应该显示该行。 I have it working, but when the checkbox is selected, the format (width) of the now visible row is out of whack (not aligned).我尝试为这个隐藏行（宽度，显示内联表......）使用 css，但我无法让它工作。

CSS：

 #hiddenRow 
       display: none;
    
    .orderTotal 
       padding: 10px;
       background-color: #fdfbe4;
       width: 95%;
       margin: 0 auto;  
    
    .orderTotal h4 
       font-weight: bold;   
    
    .totalOrder 
       color: #ee7a23;
       font-weight: bold;
       font-size: 18px; 
    
    .totalAmount 
       font-weight: bold;
       font-size: 18px; 
    

表格html：

<div class="orderTotal">
   <h4>Order Total:</h4

   <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
       <tr>
         <td>Item1</td>
         <td class="price-1">50</td>
       </tr>
       <tr id="hiddenRow">
         <td>Item2</td>
         <td class="price-2">13</td>
       </tr>
       <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
       </tr>
       <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
       </tr>

     </tbody>
   </table>
 </div>

显示隐藏表格行的JS：

// hide table row from order total if not checked
$("input[name='product_CD']").on("click", function() 
    $("#hiddenRow").toggleClass('show');
);

这是选中复选框时行显示方式的屏幕截图。

注意行的宽度和价格列的宽度是如何不对齐的。如果该行最初没有隐藏，它可以很好地预览，并且在检查元素并手动切换 #hiddenRow display:none css 打开和关闭时，它还会在浏览器中切换可见/隐藏。

【问题讨论】：

show 类是如何定义的？你试过display: table-row; 吗？

我注意到第 2 行的 h4 结束标记没有关闭，但这并没有解决我的问题。正如 Louys Patrice Bessette 所说，将 show 类更改为 display: table-row !important; 而不是引导默认值 display: block !important 为我解决了这个问题。 This codepen 工作。

【参考方案1】：

我做了一个 jsfiddle：https://jsfiddle.net/ov7d9rLa/

我认为问题可能是由于使用引导程序和 CSS 进行隐藏/显示之间的冲突。我通过使用引导类“隐藏”并通过点击事件切换该类来简化这一点。

<div class="orderTotal">
   <h4>Order Total:</h4>

   <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
       <tr>
         <td>Item1</td>
         <td class="price-1">50</td>
       </tr>
       <tr id='hiddenRow' class="hidden">
         <td>Item2</td>
         <td class="price-2">13</td>
       </tr>
       <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
       </tr>
       <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
       </tr>

     </tbody>
   </table>
 </div>

 <button id='toggle' class='btn btn-primary'>
Toggle
</button>

JS：

$("#toggle").on("click", function() 
    $("#hiddenRow").toggleClass("hidden");
);

【讨论】：

谢谢彼得！完美运行！

【参考方案2】：

我不会使用所有的 CSS。在我看来，jQuery 让它干净了 100 倍。这就是我要做的：

我会利用 jQuery 的 hide() 和 toggle()。像这样的：

$(document).ready(function() 

  // Hide the row when the page loads
  $("#hiddenRow").hide();

  // when the user clicks the checkbox, toggle the row
  $("#toggleCheck").click(function() 

    $("#hiddenRow").toggle();

  )

);

这是一个完整的 JSBin：http://jsbin.com/nokusunamo/edit?html,js,console,output

【参考方案3】：

Working fiddle.

只需按照 above comment 中的建议 @Louys 使用 display: table-row 即可：

#hiddenRow.show
     display: table-row;

希望这会有所帮助。

$("input[name='product_CD']").on("click", function() 
  $("#hiddenRow").toggleClass('show');
);

#hiddenRow 
  display: none;

.orderTotal 
  padding: 10px;
  background-color: #fdfbe4;
  width: 95%;
  margin: 0 auto;  

.orderTotal h4 
  font-weight: bold;   

.totalOrder 
  color: #ee7a23;
  font-weight: bold;
  font-size: 18px; 

.totalAmount 
  font-weight: bold;
  font-size: 18px; 


#hiddenRow.show
  display: table-row;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name='product_CD' type="checkbox" />
<div class="orderTotal">
  <h4>Order Total:</h4>

  <table id="tableOrderTotal" class="table tableTotal">
    <tbody>
      <tr>
        <td>Item1</td>
        <td class="price-1">50</td>
      </tr>
      <tr id="hiddenRow">
        <td>Item2</td>
        <td class="price-2">13</td>
      </tr>
      <tr>
        <td>Item3</td>
        <td class="price-3">30</td>
      </tr>
      <tr class="summary">
        <td class="totalOrder">Total:</td>
        <td id="result" class="totalAmount"></td>
      </tr>

    </tbody>
  </table>
</div>

【讨论】：

@Rex 不是你要找的吗？

bootstrap 关键字在这里很重要......当我在我的下方阅读@vladdobra 的评论时，我明白了。 See here 用于这个特定的引导默认值。无论如何+1 ;)