La propriété Style.Top ne dure pas

Question

J'ai un problème avec une page php. Ce que je veux c'est un bouton qui permet de mettre un tableau (inséré avec php) pour changer son TOP de 310px à 500px. Le tableau commence comme ceci :

<?php
print('<table id="bloque" style="top:310px;">');
print("<tr>");
print("<th>Código</th>");
?>

Mon script est comme ceci :

<script type="text/javascript">
    function nuevo(){
        document.getElementById("bloque").style.top="500px";
    }       
</script>

Et mon bouton est comme ça :

<INPUT TYPE="submit" VALUE="Nuevo Registro" onClick="nuevo();">

Lorsque je clique sur le bouton, le tableau passe à Top 500px, mais revient immédiatement à 310px. Y a-t-il une propriété qui m'échappe ?

Answer 1

Vous utilisez le bouton submit et non le bouton réel. Changez votre HTML en

<button type="button" onclick="nuevo();">Nuevo Registro</button>

function nuevo() {
  document.getElementById("bloque").style.top = "500px";
}

#bloque {
  position: absolute;
}

<table id="bloque" style="top:310px;">
  <tr>
    <th>Código</th>
  </tr>
</table>

<button onclick="nuevo();" type="button">Nuevo Registro</button>

Answer 2

Je pense que votre code est correct, ce qui se passe c'est que vous utilisez une entrée de type submit dans votre code, donc ce qui se passe est un rafraîchissement de la page. Ensuite, votre html revient à la première phase. Une solution consiste à ne pas utiliser de bouton de type submit.

Exemple d'utilisation :

<button id ="button" type="button" onclick="nuevo();">Nuevo Registro</button>