Bootstrap Аккордеон с таблицей и динамическим c числом или строками - PullRequest
Новая
       8

Bootstrap Аккордеон с таблицей и динамическим c числом или строками

0 голосов
/ 26 марта 2020

Не удается заставить Аккордеон свернуться, чтобы он работал внутри таблицы и динамически c количество строк. По какой-то причине он только сворачивает первый элемент в таблице и игнорирует следующие строки, хотя у меня для идентификаторов скрытых строк установлен уникальный идентификатор (номер компании). Количество строк в таблице будет динамически c. 

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

1 Ответ

0 голосов
/ 26 марта 2020

Следующий тест работает для меня с обоими рядами. Возможно ли, что job.company_number имеет повторяющиеся значения? Идентификаторы должны быть уникальными для правильной работы. 

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

Обновление: в ответ на ваш комментарий, было бы лучше использовать job.id для идентификатора аккордеона, как это? 

<tr data-toggle="collapse" data-target="#{{ job.id }}" class="accordion-toggle">

                <td colspan="6" class="hiddenRow">
                    <div id="{{ job.id }}" class="accordion-body collapse">Hello there!</div>
                </td>
...