Good afternoon, I have the following table.
<table id="tabla_principal" class="table table-principal">
<thead class="table-header">
<tr>
<th class="Actividad">Actividad General</th>
<th class="Entregable">Entregables</th>
<th class="Entregable_pre">Preliminar</th>
<th class="Entregable_pro">En proceso</th>
<th class="Entregable_fin">Final</th>
</tr>
</thead>
<tbody class="table-body " id="table_principal_body">
<tr id="row_14259" class="nivel-1acordeon">
<td class="Actividad" onclick="muestraGeneral(14259);"><span> 8.1. REALIZAR EL PROGRAMA DE TRABAJO </span> <span class="toggle-icon"><i id="chev" class="fas fa-chevron-left" style="margin-top: 2px;"></i><i id="1" class="fas fa-chevron-down" style="display: none;"></i></span></td>
<td class="Entregable"><a onclick="muestraTab(14259,1);">1</a></td>
<td class="Entregable_pre"><a onclick="muestraTab(14259,1);">1</a></td>
<td class="Entregable_pro"><a onclick="muestraTab(14259,1);">0</a></td>
<td class="Entregable_fin"><a onclick="muestraTab(14259,1);">0</a></td>
</tr></tbody>
</table>
to which I add rows with the following function.
function muestraGeneral(Id_actividad) {
var Id_actividad = Id_actividad;
if (!bandera_primer_clic.includes("row_" + Id_actividad)) {
bandera_primer_clic.push("row_" + Id_actividad);
$.post("Actividad_general.php", {
Id_actividad: Id_actividad,
},
function(data) {
$('#row_' + Id_actividad).after(data);
});
} else {
ocultar_mostrar(Id_actividad);
}
}
the row or rows you add have the following structure
<tr id="row_Hija_14259" class="hija" style='background : #cacaca;'>
<td class="Actividad" onclick="muestraGeneral(14260);"><span> 8.1.1. ELABORAR DIAGNÓSTICO DE ANTECEDENTES </span> <span class="toggle-icon"></span></td>
<td class="Entregable"><a onclick="">0</a></td>
<td class="Entregable_pre"><a onclick="">0</a></td>
<td class="Entregable_pro"><a onclick="">0</a></td>
<td class="Entregable_fin"><a onclick="">0</a></td>
</tr>
<tr id="row_Hija_14259" class="hija" style='background : #cacaca;'>
<td class="Actividad" onclick="muestraGeneral(14261);"><span> 8.1.2. CONCEPTUALIZAR EL PROGRAMA </span> <span class="toggle-icon"></span></td>
<td class="Entregable"><a onclick="">0</a></td>
<td class="Entregable_pre"><a onclick="">0</a></td>
<td class="Entregable_pro"><a onclick="">0</a></td>
<td class="Entregable_fin"><a onclick="">0</a></td>
</tr>
The problem I am running into is that I need to hide or redisplay this created row, I managed to hide the created row as follows
function ocultar_mostrar(Id_actividad) {
var sig_row = $('#row_Hija_' + Id_actividad);
$(sig_row).toggle();
}
my problem with my solution is that in case it finds more than one row as in the example above it only hides the first one. My question is how can I hide all added finals? I hope you can help me
The problem I see is that you put rows with the same id and that in HTML is not correct, each id must be unique. To differentiate the daughters you can use a field data-id="Id_atividad" You
select all the daughters but only hide those that have the value of Id_activity in the data-id field.... the rows would be left as:
But be careful with the id, they should not be repeated.
And the hide-show function would be:
With this you can delete the row you want and you can repeat codes in different children.
In your HTML code you can put that and then put it in a JavaScript function