难以使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>
以下测试对我两行都适用。 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>