javascript - 我将如何切换此表，以便在使用 Javascript 单击它时仅隐藏行？

Question

我试图弄清楚单击表头时如何隐藏这些表中的行？我正在使用引导程序 5，所以 JQuery 不可用

<table class="table table-info table-bordered">
                <thead id="tablea">  <!-- Table head -->
                  <tr>
                    <th scope="col">Column 2</th>
                    <th scope="col">Column 3</th>
                  </tr>
                </thead>
                <tbody class="table tables" id="body-a" data-action="hide">
                  {% for row in a %}
                  <tr> <!--Table rows -->
                    <td>{{row.column2}}</td>
                    <td>{{row.column3}}</td>
                  </tr>
                  {% endfor %}
                </tbody>
</table>

 <table class="table table-info table-bordered">
                <thead>
                  <tr>
                    <th scope="col">Column 2</th>
                  </tr>
                </thead>
                <tbody class="table tables" id="body-b" data-action="hide">
                  {% for row in b %}
                  <tr>
                    <td>{{row.column2}}</td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>

标签： javascriptcssdom-eventsbootstrap-5

Answer 1

我不认为你可以在引导程序上完全做到这一点，但你可以使用 javaScript 中的切换类使用自定义 css 文件，如果它有助于引导表如何隐藏，请检查这个答案，当使用 javascript 切换可见时它不能正确显示