具有表和动态编号或行的引导手风琴

问题描述 投票:0回答:1

难以使Accordion折叠以在表和动态行数内工作。由于某种原因,即使我将隐藏行的ID设置为唯一标识符(公司编号),它也只是折叠表中的第一项并忽略随后的行。表中的行数将是动态的。

    <table class="table table-condensed" style="border-collapse:collapse;">
        <thead>
        <tr>
            <th>Company Name</th>
            <th>Company Number</th>
            <th>View Documents</th>
            <th>Region</th>
            <th>Type</th>
            <th>Time Submitted</th>
            <th>Mark as Completed</th>
        </tr>
        </thead>
    <tbody>
        {% for job in todo %}
            <tr data-toggle="collapse" data-target="#{{ job.company_number }}" class="accordion-toggle">
                <td><a href="{% url 'company_detail' country_code=job.jurisdiction %}?company_number={{ job.company_number }}">{{ job.name }}</a></td>
                <td>{{ job.company_number }}</td>
                <td><a href="#{{ job.company_number }}" aria-expanded="true">View</button></td>
                <td>{{ job.jurisdiction }}</td>
                <td>{{ job.job_type }}</td>
                <td>{{ job.time_submitted|date:"d M Y"}}</td>
                <td><a href="{% url 'mark_as_completed' %}?job_id={{ job.id }}">Mark as Completed</td>
            </tr>
            <tr>
                <td colspan="6" class="hiddenRow">
                    <div id="{{ job.company_number }}" class="accordion-body collapse">Hello there!</div>
                </td>
            </tr>
        {% endfor %}
    </tbody>
    </table>
html css bootstrap-4 accordion
1个回答
0
投票

以下测试对我两行都适用。 job.company_number是否可能具有重复值? ID必须是唯一的,ID才能正常工作。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   <table class="table table-condensed" style="border-collapse:collapse;">
        <thead>
        <tr>
            <th>Company Name</th>
            <th>Company Number</th>
            <th>View Documents</th>
            <th>Region</th>
            <th>Type</th>
            <th>Time Submitted</th>
            <th>Mark as Completed</th>
        </tr>
        </thead>
    <tbody>
    
    <!-- Job 1 -->
            <tr data-toggle="collapse" data-target="#company1" class="accordion-toggle">
                <td><a href="{% url 'company_detail' country_code=job.jurisdiction %}?company_number={{ job.company_number }}">{{ job.name }}</a></td>
                <td>{{ job.company_number }}</td>
                <td><a href="#{{ job.company_number }}" aria-expanded="true">View</button></td>
                <td>{{ job.jurisdiction }}</td>
                <td>{{ job.job_type }}</td>
                <td>{{ job.time_submitted|date:"d M Y"}}</td>
                <td><a href="{% url 'mark_as_completed' %}?job_id={{ job.id }}">Mark as Completed</td>
            </tr>
            <tr>
                <td colspan="6" class="hiddenRow">
                    <div id="company1" class="accordion-body collapse">Hello there!</div>
                </td>
            </tr>
            
    <!-- Job 2 -->
            <tr data-toggle="collapse" data-target="#company2" class="accordion-toggle">
                <td><a href="{% url 'company_detail' country_code=job.jurisdiction %}?company_number={{ job.company_number }}">{{ job.name }}</a></td>
                <td>{{ job.company_number }}</td>
                <td><a href="#{{ job.company_number }}" aria-expanded="true">View</button></td>
                <td>{{ job.jurisdiction }}</td>
                <td>{{ job.job_type }}</td>
                <td>{{ job.time_submitted|date:"d M Y"}}</td>
                <td><a href="{% url 'mark_as_completed' %}?job_id={{ job.id }}">Mark as Completed</td>
            </tr>
            <tr>
                <td colspan="6" class="hiddenRow">
                    <div id="company2" class="accordion-body collapse">Hello there!</div>
                </td>
            </tr>

    </tbody>
    </table>
© www.soinside.com 2019 - 2024. All rights reserved.