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

Question

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

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

谢谢你

标签： jqueryhtmlcss

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>