從輸入文本更新表格單元格值

Question

這是我的表的樣子：

<table id="mytable" border="2" style= "background-color: #f9f9f9; color: #000000; margin: 0 auto;" >
      <thead style= "background-color: #FFFFFF">
        <tr>
          <th>ID</th>
          <th>Goal</th>
          <th>Update</th>
        </tr>
      </thead>
      <tbody>
        <?php
         if ($result = $link->query($query)) {
              $num_rows = 0;
              while ($row = $result->fetch_assoc()) {
                  $num_rows++;
                  
                  echo
                  "<tr>
                  <td>{$row['id']}</td>
                  <td><input type='text' name='goal' id='goal' value='{$row['goal']}'></td>
                  <td><a onClick=\"javascript: return confirm('Are you sure you want to update the goal?');\" href='updategoal.php?id={$row['id']}&goal={$row['goal']}' class='aR'>Update goal</a></td>
                  </tr>";
              }
              /*freeresultset*/
          }
        ?>
      </tbody>
    </table>

updategoal.php在這里：

<?php

include "dbase.php"; // Using database connection file here

$unsafe_goal = $_GET['goal'];
$safe_goal = (int)$unsafe_goal;

$unsafe_variable = $_GET['id'];
$safe_variable = (int)$unsafe_variable;

$sql = mysqli_query($link, "UPDATE goals SET goal = $safe_goal WHERE id = $safe_variable");

if($sql)
{
    mysqli_close($link); // Close connection
    header("location:".$_SERVER['HTTP_REFERER']);
    exit;   
}
else
{
    echo "Error deleting record"; // display error message if not updated
}
?>

將鼠標懸停在<a Update goal /a>上時， url 會顯示如下內容： https://example.com/updategoal.php?id=1&goal=10 ，因此它不會將目標更改為我的目標在輸入文本中輸入，它只是添加了與之前相同的目標。 有小費嗎？

Answer 1

我花了很長時間才明白你在問什么，但我想我明白了。 因此，即使您更新了目標輸入字段，鏈接也會在頁面加載后創建並保持相同的值。 您需要某種 js 腳本來檢查輸入值何時更改，然后相應地更改鏈接。

編輯：我還建議在您的表中使用類而不是 id。 這是一個按預期工作的示例

<table id="mytable" border="2" style= "background-color: #f9f9f9; color: #000000; margin: 0 auto;" >
  <thead style= "background-color: #FFFFFF">
    <tr>
      <th>ID</th>
      <th>Goal</th>
      <th>Update</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>145</td>
      <td><input type='text' name='goal' class='goal' value='2' onkeyup='changeLink(this)'></td>
      <td><a href='updategoal.php?id=145&goal=2' class='aR'>Update goal</a></td>
    </tr>
    <tr>
      <td>146</td>
      <td><input type='text' name='goal' class='goal' value='0' onkeyup='changeLink(this)'></td>
      <td><a href='updategoal.php?id=146&goal=0' class='aR'>Update goal</a></td>
    </tr>
  </tbody>
</table>

function changeLink(input){
  var newGoal = input.value;
  var td = input.parentElement;
  var link_td = td.nextElementSibling;
  var updateLink = link_td.querySelector('a');
  var oldLink = updateLink.href;
  updateLink.href=oldLink.substring(0, oldLink.length-1)+newGoal;
  console.log(updateLink);  
}

https://codepen.io/cst90/pen/zYqOEzL