双击触发数据库更新的JS功能在PHP页面失效及同步问题

Hey Daniel, let's break down your problems one by one and fix them up:

问题1：双击修改功能在PHP页面无法生效的原因及解决 #

First off, let's pinpoint the root issues in your JavaScript code—these are likely why it works in static HTML but breaks in your PHP-rendered page:

核心问题：事件对象引用错误 #

Your code mixes the local event parameter e with the global event variable, which can cause inconsistencies (especially if your PHP page has other scripts that interfere with the global event). Plus, you forgot to pass the event parameter to the document click handler, which throws an error in strict environments.

次要可能：jQuery引入遗漏 #

Double-check that your PHP page includes the jQuery library before your custom JS code—static HTML might have it, but if you forgot to add it to the PHP template, the code won't run at all.

修改后的JavaScript代码 #

Here's the fixed version with proper event handling:

$(function () {
  // Use event delegation for robustness (works even with dynamic content later)
  $(document).on("dblclick", ".inner", function (e) {
    if ($(e.target).attr("class") !== "thVal") {
      e.stopPropagation();
      const currentEle = $(this);
      const value = currentEle.html();
      updateVal(currentEle, value);
    }
  });
});

function updateVal(currentEle, value) {
  $(document).off("click");
  currentEle.html(`<input class="thVal" type="text" value="${value}" />`);
  const input = $(".thVal");
  input.focus();

  // Handle enter key submission
  input.keyup(function (e) {
    if (e.keyCode === 13) {
      const newValue = input.val();
      currentEle.html(newValue);
      $(document).off("click");
    }
  });

  // Handle click outside submission
  $(document).click(function (e) {
    if ($(e.target).attr("class") !== "thVal") {
      const newValue = input.val();
      currentEle.html(newValue);
      $(document).off("click");
    }
  });
}

I switched to $(document).on() for event delegation—this is more robust even if you ever add dynamic users to the table later.

问题2：实现修改后同步更新到数据库 #

To sync the edited value to your database, we'll use AJAX to send the update to a PHP backend without reloading the page. Here's how to do it step by step:

Step 1: Add a data attribute to your PHP-rendered table #

First, modify your PHP code to include the user ID as a data-id attribute on the <th>—this makes it easy to grab the ID when updating:

<?php 
$allUsers = mysqli_query($db,"SELECT * FROM users"); 
echo "<table class=\"table table-hover\" style=\"width: 100%;\"> 
        <thead> 
          <tr> 
            <th scope=\"col\">#</th> 
            <th scope=\"col\">Username</th> 
          </tr> 
        </thead> 
        <tbody>"; 
while($row = mysqli_fetch_array($allUsers)) { 
  echo "<tr>"; 
  // Add data-id to store the user's unique ID
  echo "<th class=\"inner\" data-id=\"" . $row['id'] . "\">" . $row['id'] . "</th>"; 
  echo "<td>" . $row['username'] . "</td>"; 
  echo "</tr>"; 
} 
echo " </tbody> </table>"; 
?>

Step 2: Update the JavaScript to send AJAX requests #

Modify the updateVal function to send the new value and user ID to a PHP backend when the edit is confirmed:

function updateVal(currentEle, value) {
  const userId = currentEle.data("id"); // Get user ID from data attribute
  $(document).off("click");
  currentEle.html(`<input class="thVal" type="text" value="${value}" />`);
  const input = $(".thVal");
  input.focus();

  // Handle enter key submission
  input.keyup(function (e) {
    if (e.keyCode === 13) {
      const newValue = input.val();
      syncToDatabase(userId, newValue, currentEle, value);
      $(document).off("click");
    }
  });

  // Handle click outside submission
  $(document).click(function (e) {
    if ($(e.target).attr("class") !== "thVal") {
      const newValue = input.val();
      syncToDatabase(userId, newValue, currentEle, value);
      $(document).off("click");
    }
  });
}

// New function to handle AJAX sync with database
function syncToDatabase(userId, newValue, currentEle, originalValue) {
  $.ajax({
    url: "update_user.php", // Path to your backend script
    method: "POST",
    data: {
      id: userId,
      username: newValue
    },
    dataType: "json",
    success: function(response) {
      if (response.success) {
        currentEle.html(newValue);
        alert("User updated successfully!"); // Optional success feedback
      } else {
        // Revert to original value if update fails
        currentEle.html(originalValue);
        alert("Failed to update user: " + response.error);
      }
    },
    error: function() {
      // Revert on network error
      currentEle.html(originalValue);
      alert("Network error: Could not connect to server.");
    }
  });
}

Step 3: Create the backend PHP script (update_user.php) #

This script will receive the AJAX request, validate input, and update the database (always sanitize user input to prevent SQL injection!):

<?php
// Connect to your database (use your existing $db connection or create a new one)
$db = mysqli_connect("localhost", "your_username", "your_password", "your_database");

// Check connection
if (!$db) {
  die(json_encode(["success" => false, "error" => "Database connection failed"]));
}

// Validate input
if (!isset($_POST['id']) || !isset($_POST['username'])) {
  echo json_encode(["success" => false, "error" => "Missing required parameters"]);
  exit;
}

// Sanitize input to prevent SQL injection
$userId = mysqli_real_escape_string($db, $_POST['id']);
$newUsername = mysqli_real_escape_string($db, $_POST['username']);

// Execute update query
$query = "UPDATE users SET username = '$newUsername' WHERE id = '$userId'";
$result = mysqli_query($db, $query);

if ($result) {
  echo json_encode(["success" => true]);
} else {
  echo json_encode(["success" => false, "error" => mysqli_error($db)]);
}

// Close database connection
mysqli_close($db);
?>

内容的提问来源于stack exchange，提问作者danielr