jquery - 表内表折叠未正确显示

Question

我有一张表，我在其中使用基表中的折叠。现在，当我在 table collapse 中创建一个新表然后查看部分不平衡时会发生什么，这还不清楚，但是当我从一个部分中删除该表并写一些看起来很完美的东西时。我不知道这个问题。那么，我该如何解决这个问题呢？请帮助我。

<table class="table table-hover js-basic-example dataTable table-custom m-b-0">
<thead>
    <tr>
        <th>Job ID</th>                                         
        <th>Job Title</th>
        <th>Deadline</th>
        <th>Lead</th>
        <th>Team</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#resume">
        <td>
            <h6>jobi765243</h6>
        </td>
        <td class="project-title">
            <h6>InfiniO 4.1</h6>
            <small>Created 14 July, 2018</small>
        </td>
        <td>8 Aug, 2018</td>
        <td><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="Team Lead" alt="Avatar" class="width35 rounded"></td>
        <td>
            <ul class="list-unstyled team-info">
                <li><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="Avatar" alt="Avatar"></li>
                <li><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar2.jpg" data-toggle="tooltip" data-placement="top" title="Avatar"></li>
                <li><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar3.jpg" data-toggle="tooltip" data-placement="top" title="Avatar"></li>
            </ul>
        </td>
        <td class="project-actions">
            <a href="project-detail.html" class="btn btn-sm btn-outline-primary"><i class="icon-eye"></i></a>
        </td>
    </tr>
    <div class="body collapse" id="resume" >
        <div id="wizard_horizontal">
            <h2>Received</h2>
            <section>
                <table class="table">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>name</th>
                            <th>class</th>
                            <th>roll</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="collapse">
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>4</td>
                        </tr>
                    </tbody>
                </table>
            </section>
            <h2>Shortlisted</h2>
            <section>
                <p>Donec </p>
            </section>
            <h2>Interview</h2>
            <section>
                <p> Morbi </p>
            </section>
            <h2>Final Status</h2>
            <section>
                <p> Quisque at sem turpis</p>
            </section>
            <h2>Offer Letter</h2>
            <section>
                <p> Quisque at sem turpis </p>
            </section>
        </div>
    </div>
</tbody>

谢谢

Answer 1

问题是表格中 div#resume 的 HTML 结构是错误的。这意味着，tbody 元素只能包含 tr 元素作为其子元素。因此，您可以修改结构如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-hover js-basic-example dataTable table-custom m-b-0">
<thead>
    <tr>
        <th>Job ID</th>                                         
        <th>Job Title</th>
        <th>Deadline</th>
        <th>Lead</th>
        <th>Team</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#resume">
        <td>
            <h6>jobi765243</h6>
        </td>
        <td class="project-title">
            <h6>InfiniO 4.1</h6>
            <small>Created 14 July, 2018</small>
        </td>
        <td>8 Aug, 2018</td>
        <td><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="Team Lead" alt="Avatar" class="width35 rounded"></td>
        <td>
            <ul class="list-unstyled team-info">
                <li><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="Avatar" alt="Avatar"></li>
                <li><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar2.jpg" data-toggle="tooltip" data-placement="top" title="Avatar"></li>
                <li><img src="<?php echo base_url(); ?>company/assets/images/xs/avatar3.jpg" data-toggle="tooltip" data-placement="top" title="Avatar"></li>
            </ul>
        </td>
        <td class="project-actions">
            <a href="project-detail.html" class="btn btn-sm btn-outline-primary"><i class="icon-eye"></i></a>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <div class="body collapse" id="resume">
                <div id="wizard_horizontal">
                    <h2>Received</h2>
                    <section>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>name</th>
                                    <th>class</th>
                                    <th>roll</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="collapse">
                                    <td>1</td>
                                    <td>2</td>
                                    <td>3</td>
                                    <td>4</td>
                                </tr>
                            </tbody>
                        </table>
                    </section>
                    <h2>Shortlisted</h2>
                    <section>
                        <p>Donec </p>
                    </section>
                    <h2>Interview</h2>
                    <section>
                        <p> Morbi </p>
                    </section>
                    <h2>Final Status</h2>
                    <section>
                        <p> Quisque at sem turpis</p>
                    </section>
                    <h2>Offer Letter</h2>
                    <section>
                        <p> Quisque at sem turpis </p>
                    </section>
                </div>
            </div>
        </td>
    </tr>
</tbody>