html - 带有表格和动态数字或行的引导手风琴
问题描述
无法让 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 必须是唯一的才能正常工作。
<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 用于手风琴 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>
推荐阅读
- python - 不明白这个 json JSONDecodeError 的原因
- sqlite - 如何在sqlite中选择日期时间?请帮我
- kivy - Kivy TextInput如何更改hint_text字体大小
- scala - Spark monotonically_increasing_id() 为所有分区提供连续的 id
- excel - 为什么我的 Excel VBA 工作表模块代码在过程中被其他代码替换?
- sql - 使用函数SQL提取没有域扩展名的域名
- c++ - 为什么我必须为每个命名空间定义一个哈希函数作为 unordered_set?
- flopy - 在 Flopy 中使用旋转模型网格 (MF6) 的最佳方式?
- javascript - 如何设置对象缺失元素的数据类型?
- python - 将文件字段编码和解码为字节