Existe no código o botão exibe/oculta, referenciado uma função JavaScript, porém, o botão só funciona trazendo o último registro do banco, nunca o registro referente a linha que ele está e só exibe depois da primeira linha da tabela.
Por exemplo, mesmo eu clicando o botão que está referenciando o 4º registro, ele exibe a <div>
na abaixo da 1º linha de resultados da tabela, como eu faço para que o $row['chave']
fique abaixo de cada linha de acordo com sua ordem na tabela e só exiba ou oculte de acordo a ação no botão, segue abaixo código;
foreach($result as $row) {
$database = date_create($row['expira']);
$datadehoje = date_create();
$resultado = date_diff($database, $datadehoje);
$intervalo = date_interval_format($resultado, '%a');
if($intervalo > 5){
$classe = "";
}else if($intervalo <= 2){
$classe = "color-alert";
}else if($intervalo > 2 && $intervalo <=5){
$classe ="color-warn";
}
//echo $datab;
// echo $datac;
echo '<tr class="'.$classe.'">';
echo '<td ><center>'.$row['cliente'].'</center></td>';
echo '<td ><center>'.$row['cnpj'].'</center></td>';
echo '<td ><center>'.$row['registro'].'</center></td>';
echo '<td ><center>'.$row['versao'].'</center></td>';
echo '<td ><center>'.$row['expira'].'</center></td>';
echo '<td><center> '
. '<a class="btn btn-primary" href="editar.php?id='.$row['id'].'">'
. '<i class="fas fa-edit"></i> Editar</a> </td>';
echo'<td><button id="btnExibeOculta" class="btn" onclick="ocultarExibi();">'
. 'Exibir/Ocultar</button></td>';
echo'</tr>';
echo'<tr>
<td>
<div id="dvConteudo" style="display:none;" >'.$row['chave'].'</div>
</td>
</tr>';
}
Código Javascript:
<script>
var visibilidade = true;
function ocultarExibir() {
if (visibilidade) {
document.getElementById("dvConteudo").style.display = "none";
visibilidade = false;
} else {
document.getElementById("dvConteudo").style.display = "block";
visibilidade = true;
}
}
</script>