Bootstrap 表是如何隐藏的，当使用 javascript 切换可见时，它无法正确显示 [英] Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

问题描述

我有一个引导表.我最初使用 css 隐藏表格行之一.我有一个复选框，如果它被选中，我想显示隐藏的表格行，否则它不应该显示该行.我有它工作，但选择复选框时，现在可见行的格式(宽度)超出了whack(未对齐).我尝试使用此隐藏行的 css(宽度、显示内联表...)，但我无法让它工作.

CSS:

 #hiddenRow {显示:无；}.合计订单 {填充:10px；背景颜色:#fdfbe4；宽度:95%；边距:0 自动；}.orderTotal h4 {字体粗细:粗体；}.totalOrder {颜色:#ee7a23；字体粗细:粗体；字体大小:18px；}.总金额 {字体粗细:粗体；字体大小:18px；}

表格html:

<h4>订单总数:</h4<table id="tableOrderTotal" class="table tableTotal"><tr><td>项目 1</td><td class="price-1">50</td></tr><td>项目2</td><td class="price-2">13</td></tr><tr><td>Item3</td><td class="price-3">30</td></tr><tr class="摘要"><td class="totalOrder">总计:</td><td id="result" class="totalAmount"></td></tr></tbody>

JS 显示隐藏的表格行:

//如果未选中，则从订单总数中隐藏表格行$("input[name='product_CD']").on("click", function() {$("#hiddenRow").toggleClass('show');});

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

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

解决方案

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

我认为问题可能是由于使用引导程序和 CSS 进行隐藏/显示之间的斗争.我通过使用引导程序类隐藏"简化了这一点，并使用点击事件切换该类.

<h4>订单总数:</h4><table id="tableOrderTotal" class="table tableTotal"><tr><td>项目 1</td><td class="price-1">50</td></tr><tr id='hiddenRow' class="隐藏"><td>项目2</td><td class="price-2">13</td></tr><tr><td>Item3</td><td class="price-3">30</td></tr><td class="totalOrder">总计:</td><td id="result" class="totalAmount"></td></tr></tbody>
<button id='toggle' class='btn btn-primary'>切换

JS:

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

I have a bootstrap table. I am using css to hide one of the table rows initially. I have a checkbox that I want to show the hidden table row if it is selected, otherwise it should not show the row. I have it working, but when the checkbox is selected, the format (width) of the now visible row is out of whack (not aligned). I tried playing with the css for this hidden row (width, display inline-table...) but I cannot get it to work.

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; 
    }

Table 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 to show hidden table row:

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

Here is a screenshot of how the row displays when the checkbox is selected.

Notice how the width of the row and the price column is not aligned. It previews fine if the row is not initially hidden and it also toggles visible/hidden fine in a browser when inspecting the element and manually toggling the #hiddenRow display:none css on and off.

解决方案

I made a jsfiddle: https://jsfiddle.net/ov7d9rLa/

I think the problem might have been due to fighting between using bootstrap and CSS for hiding/showing. I simplified this by using the bootstrap class "hidden", and toggling that class with the click event.

<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");
});

这篇关于Bootstrap 表是如何隐藏的，当使用 javascript 切换可见时，它无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！