如果值> = 1000，如何更改表格行的背景颜色？

Question

我正在尝试更改表中某些行的背景色，当行的输入为> = 1000时，我单击按钮。我正在使用表和提交按钮中的输入来完成此操作。在php中，我从输入中获取变量int，在JS中，检查它是否<= 1000并更改背景色。但这只是片刻，在该页面刷新之后，不应该这样。这是我的代码：

<form action="" method="post">
<table>

<thead>

      <tr>

         <th>first</th> <th>second</th> <th>third</th>

      </tr>

   </thead>

   <tbody>

      <tr id="1">

         <td>1</td> <td><input type="text"  name="value11" /></td><td><input type="text"  name="value12" /></td>

</tr>
     <tr id="2">

         <td>2</td> <td><input type="text"  name="value21" /></td><td><input type="text"  name="value22" /></td>

</tr>

   </tbody>
 <?php
        if(isset($_POST['green'])){
            $value21 = (int)trim($_POST['value11']);

            $value21 = (int)trim($_POST['value21']);}
?>   
</table>
 <button type="submit" name="green" onclick="makeGreen()">button</button> 
</form>



 <script> 
function makeGreen() { 
    var val1 = "<?php echo json_encode($value11) ?>";
var val2 = "<?php echo json_encode($value21) ?>";
    if(val1 >= 1000)
            document.getElementById("1").style.backgroundColor = "green";


if(val2 >= 1000)
            document.getElementById("2").style.backgroundColor = "green";

        } 
    </script> 

您能告诉我哪里出了问题吗？为什么不起作用？

Answer 1

单击按钮时，实际上是在调用函数makeGreen（），然后提交了表单。

如果只想通过单击按钮使背景行变为绿色，则应用一个按钮替换提交类型，请尝试此：

<button type="button" name="green" onclick="makeGreen()">button</button>