如何解决如果我使用 JavaScript 更改加载时的 id,Bootstrap Collapse 将不起作用
所以我试图从表格的每一行做一个折叠信息。这些行是从 Odoo 框架生成的,因此,为了将数据目标与相应的 ID 相关联,我迭代了表并更改了每个表的值。
不顾控制台上的 id,并且在检查元素相同后,折叠不起作用。
你们能帮我找出原因和可能的解决方案吗?提前致谢。
Javascript
var table = document.getElementById("social_programs_table");
var incr = 0;
//i = 1,because the first row should be ignored
for (var i = 1,row; row = table.rows[i]; i++) {
//iterate through rows
if (i % 2 != 0) {
incr++;
row.cells[5].firstChild.nextElementSibling.dataset.target = "target" + incr;
console.log("Row Target ID: " + row.cells[5].firstChild.nextElementSibling.dataset.target);
}
else {
row.id = "target" + incr;
console.log("Row ID: " + row.id);
}
}
各表
<table class="table table-striped" id="social_programs_table">
<thead>
<tr>
<th scope="col">Nome da Entidade</th>
<th scope="col">Designação do Projeto</th>
<th scope="col">Duração (meses)</th>
<th scope="col">População-alvo</th>
<th scope="col">Fonte de Financiamento</th>
<th scope="col">Saber Mais</th>
</tr>
</thead>
<tbody>
<!-- ? Loop -->
<t t-foreach="programs" t-as="obj">
<tr>
<th scope="row"><t t-esc="obj.beneficiary_entity" /></th>
<td><t t-esc="obj.name" /></td>
<td><t t-esc="obj.duration" /></td>
<td><t t-esc="obj.target_audience" /></td>
<td><t t-esc="obj.financial_source" /></td>
<td id="collapse_td">
<button class="btn btn-primary" data-toggle="collapse" data-target="#target" id="collapse_btn">+</button>
</td>
</tr>
<tr class="collapse out" id="target">
<td>This txt should be collapsed</td>
</tr>
</t>
<!-- ? End loop -->
</tbody>
</table>
解决方法
它不起作用的原因可能是重复的 ID。
尝试使用任何其他唯一值作为 id,例如 t-att-id="obj.name" & 同样将数据目标分配为 t-att-data-target= “obj.name” 和仅在唯一的情况下使用名称,这里的代码供您参考。
HTML 代码:
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。