Javascript function inside a Loop For PHP

Asked

Viewed 139 times

0

I have a JS function to hide/show table row, the same is inside a loop for. However I’m having difficulties to activate it. When I run such a function outside the loop it works perfectly, but when I step into it, the story is another.

I would very much like help with this problem.

Follows PHP code and JS function

<script>
    function Mostrar(x){
        if(document.getElementById(x).style.display == 'none'){
            document.getElementById(x).style.display = 'table-row';
        }else{
            document.getElementById(x).style.display = 'none';
        }
    }
</script>

<?php

$tl_debito = 0;
if($_SESSION['debito'] <> ""){
    $tl_debito = count($_SESSION['debito']);
}
$total_desp = 0;
print
  "<table width='100%' border='1'>
    <tr align='center' bgcolor='#999'>
      <td>PROCESSO</td>
      <td>SETOR</td>
      <td>IDENTIFICAÇÃO</td>
      <td>NR REGISTRO</td>
      <td>VL DESPESA</td>
      <td>OBSERVAÇÕES</td>
    </tr>";
for($i = 0; $i < $tl_debito; $i++){
    $total_desp += $_SESSION['debito'][$i]->SUM;
    $obj_proc = $obj_pdo->getTabProcesso($_SESSION['debito'][$i]->CD_PROCESSO,"","");
    $_SESSION['proc'] = $obj_proc;
    print
      "<tr align='center' onClick='Mostrar('linha')'>
        <td class='texto'>".$_SESSION['debito'][$i]->CD_PROCESSO."</td>
        <td class='texto'>".$_SESSION['debito'][$i]->SETOR."</td>
        <td class='texto'>".$_SESSION['debito'][$i]->IDT_PROCESSO."</td>
        <td class='texto'>".$_SESSION['debito'][$i]->NR_REGISTRO."</td>
        <td class='texto'>".number_format($_SESSION['debito'][$i]->SUM,"2",",",".")."</td>
        <td class='texto'>".$_SESSION['proc'][0]->OBSERVACAO."</td>
      </tr>
      <tr align='center' class='linha' id='linha'>
        <td class='texto'>".$_SESSION['debito'][$i]->CD_PROCESSO."</td>
      </tr>";
}
print
   "<tr align='center'>
      <td colspan='5'> TOTAL DESPESAS </td>
      <td colspan='1'>".number_format($total_desp,"2",",",".")."</td>
    </tr>
   </table>";

?>
  • I’ve tried this @Victor, but when the line is shown, it appears all inside the first cell. But if you have any other way to do that, I would be very grateful.

  • Try onClick='Show("line")'

1 answer

0

You can print the tr of the table with a class and a date attribute and then add the events via javascript, like this:

(You don’t need onClick here)

<tr align='center' class='show' data-line="<?php echo $i ?>">...</tr>

Add the click event on the trs with toggleLine to hide or show the line:

<script type="text/javascript">
        var lines = document.querySelectorAll('.show');
            for (var i = 0; i < lines.length; i++) {
            lines[i].addEventListener("click", (event) => {
                toggleLine(event.currentTarget.getAttribute('data-line'))
            });
        }

        function toggleLine(linePosition) {
            var element = document.querySelectorAll('.line-tr')[linePosition]
            console.log(element.style.display, 'display', element)
            if (element.style.display == '' || element.style.display == 'block') {
                element.style.display = 'none'
            } else {
                element.style.display = 'block'
            }
        }
</script>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.