Home / Questions / 202284
Accepted
Shassain
Asked: 2020-10-06 09:27:28 +0800 CST 2020-10-06 09:27:28 +0800 CST

如何在 html 表中进行引导折叠？

  • 772

我想在表格上获得这种toggle 引导效果，即获得向上滚动的效果，但我得到的只是它以某种可怕的效果淡入淡出。

我给你留下一些代码：

$(function () {
    $('.btn_show').click(function (ev) {
            $('#contenido').slideToggle("slow");

    });
})
.input-sm{
        height: 20px;
        font-size: 9pt;
        width: 100%;
    }
    .letra{
        font-size: 9pt;
    }
    table {
        border-collapse: collapse;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
    }

    tr {
        border-bottom: 1px solid #000;
    }
    input:[type=text]{
        border-bottom: 1px solid #C00;
        border: 0;
        outline: none; 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="100%">
            <thead style="background:#000;text-align:center;">
                <tr>
                    <td colspan="4">
                        <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
                    </td>
                </tr>
            </thead>
            <tbody id="contenido" style="display:none">
                <tr>
                    <th> 
                    Peso RN:
                    </th>
                    <td>
                        <input type="text" class="input-sm">
                    </td>
                    <th>Parto:</th>
                    <td>
                        <input type="text" class="input-sm">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Obs. Perinatales
                    </td>
                    <td colspan="2">
                        <input type="text" class="input-sm">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Obs. Perinatales
                    </td>
                    <td colspan="2">
                        <input type="text" class="input-sm">
                    </td>
                </tr>
            </tbody>
                
        </table>

如何在 html 表格中获得滚动效果？

javascript

3 Answers

  1. Best Answer

    您必须再添加两个选项CSS，将 adisplay:block应用于元素tbody，在执行此过程时，有必要修改行的宽度tr和tbody （否则会错位），这是通过display:table;width:100%;

    ev.preventDefault();在链接上执行时也使用click，它不会执行重定向。;)

    例如

    $(function () {
    $('.btn_show').click(function (ev) {
    	ev.preventDefault();
        $('#contenido').slideToggle("slow");
    });
})
    .input-sm{
        height: 20px;
        font-size: 9pt;
        width: 100%;
    }
    .letra{
        font-size: 9pt;
    }
    
    table {
        border-collapse: collapse;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
    }
    tbody {
        display:block;
    }
    thead, tbody tr {
        display:table;
        width:100%;
    }
    tr {
        border-bottom: 1px solid #000;
    }
    input:[type=text]{
        border-bottom: 1px solid #C00;
        border: 0;
        outline: none; 
    } 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
    <thead style="background:#000;text-align:center;">
        <tr>
            <td colspan="4">
                <a class="btn_show" href="#!" 
                style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
            </td>
        </tr>
    </thead> 
    
    <tbody id="contenido" style="display: none;" >
        <tr>
            <td> 
            Peso RN:
            </td>
            <td>
                <input type="text" class="input-sm">
            </td>
            <td>Parto:</td>
            <td>
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Obs. Perinatales
            </td>
            <td colspan="2">
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Obs. Perinatales
            </td>
            <td colspan="2">
                <input type="text" class="input-sm">
            </td>
        </tr>
    </tbody>
</table>

    • 4

  2. display: none将from更改<tbody>为display: blockthat 满足您的要求

    $(function() {
  $('.btn_show').click(function(ev) {
    $('#contenido').slideToggle("slow");

  });
})
    .input-sm {
  height: 20px;
  font-size: 9pt;
  width: 100%;
}

.letra {
  font-size: 9pt;
}

table {
  border-collapse: collapse;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  width: 100%;
}

tr {
  border-bottom: 1px solid #000;
}

input:[type=text] {
  border-bottom: 1px solid #C00;
  border: 0;
  outline: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="100%">
  <thead style="background:#000;text-align:center;">
    <tr>
      <td colspan="4">
        <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
      </td>
    </tr>
  </thead>
  <tbody id="contenido" style="display:block">
    <tr>
      <th>
        Peso RN:
      </th>
      <td>
        <input type="text" class="input-sm">
      </td>
      <th>Parto:</th>
      <td>
        <input type="text" class="input-sm">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Obs. Perinatales
      </td>
      <td colspan="2">
        <input type="text" class="input-sm">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Obs. Perinatales
      </td>
      <td colspan="2">
        <input type="text" class="input-sm">
      </td>
    </tr>
  </tbody>

</table>

    • 3

  3. 我拼错了上一个答案，这应该可以

        <table width="100%">
        <thead style="background:#000;text-align:center;">
            <tr>
                <td colspan="4">
                    <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
                </td>
            </tr>
        </thead>    
</table>
    <div id="contenido" style="display: block;">
    <table style="display: table;">
        <tbody style="">
            <tr>
                <th> 
                Peso RN:
                </th>
                <td>
                    <input type="text" class="input-sm">
                </td>
                <th>Parto:</th>
                <td>
                    <input type="text" class="input-sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Obs. Perinatales
                </td>
                <td colspan="2">
                    <input type="text" class="input-sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Obs. Perinatales
                </td>
                <td colspan="2">
                    <input type="text" class="input-sm">
                </td>
            </tr>
        </tbody>

    </table>

    • 0