Style.Top属性不会持续

Question

我的php页面有问题。 我想要的是一个可以放置表格（插入php）的按钮，以将其TOP从310px更改为500px。 该表开始如下：

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

我的脚本是这样的：

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

我的按钮是这样的：

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

当我单击该按钮时，表格会移至前500像素，但立即会回到310像素。 我有缺少的财产吗？

Answer 1

您使用的是“提交”按钮，而不是实际按钮。 将您的HTML更改为

<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

我认为您的代码是正确的，发生的事情是您在代码中使用了输入类型Submit，因此发生的是页面刷新。 然后，您的html返回到第一阶段。 一种解决方案不使用提交类型按钮。

使用示例：

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