I'm currently working on collapsing information from each row of a table. The rows are generated using the Odoo framework, so I had to iterate through the table and update the values accordingly to associate the data-target with the corresponding ID.
Even though the IDs in the console and after inspecting the elements appear to be the same, the collapse feature is not functioning as expected.
Could someone assist me in identifying the cause and possibly suggesting a solution? Thank you in advance.
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);
}
}
Respective Table
<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 text should be collapsed</td>
</tr>
</t>
<!-- ? End loop -->
</tbody>
</table>