如果值> = 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

當按下按鈕時，您實際上是在調用 function makeGreen()，然后您的表單被提交。

如果你只想通過點擊按鈕使背景行變為綠色，你應該用一個按鈕替換提交類型，試試這個：

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