PHP + AJAX 實作表格雙擊編輯：前後端完整整合範例

核心互動流程

1. 使用者雙擊 <td> → 替換為 <input>、聚焦
2. 失焦 (blur) → 取得新值、AJAX 送往後端
3. 後端更新資料庫 → 回傳結果
4. 前端根據結果決定保留新值或還原

前端 jQuery 實作

<script>
$(function() {
    $('td').dblclick(function() {
        var $td = $(this);
        var itemId = $td.attr('id');           // 需在  設定主鍵
        var oldVal = $td.text();
        var $input = $('').val(oldVal);

        $td.html($input);
        $input.on('click', function(e) { e.stopPropagation(); }); // 防冒泡觸發雙擊
        $input.trigger('focus');

        $input.blur(function() {
            var newVal = $(this).val();
            if (newVal === oldVal) {
                $td.html(newVal);
                return;
            }

            // AJAX 送往後端
            $.get('update.php', {
                itemid: itemId,
                field: $td.data('field'), // 需在  設定欄位名
                value: newVal
            }, function(res) {
                if (res === '1' || res.success) {
                    $td.html(newVal);
                } else {
                    $td.html(oldVal); // 失敗還原
                    alert('更新失敗：' + (res.msg || '未知錯誤'));
                }
            });
        });
    });
});
</script>

HTML 表格結構要求

<table id="data-table">
    <thead>
        <tr><th>ID</th><th>姓名</th><th>Email</th></tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td id="1" data-field="name">張三</td>
            <td id="1" data-field="email">zhang@example.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td id="2" data-field="name">李四</td>
            <td id="2" data-field="email">li@example.com</td>
        </tr>
    </tbody>
</table>

• id = 資料列主鍵 (PK)
• data-field = 資料庫欄位名

後端 PHP (update.php)

<?php
// 1. 參數驗證
$itemId = isset($_GET['itemid']) ? (int)$_GET['itemid'] : 0;
$field  = isset($_GET['field'])  ? $_GET['field']  : '';
$value  = isset($_GET['value'])  ? $_GET['value']  : '';

$allowedFields = ['name', 'email', 'phone', 'address'];
if (!$itemId || !in_array($field, $allowedFields)) {
    exit(json_encode(['success' => false, 'msg' => '參數錯誤']));
}

// 2. 資料庫更新 (PDO 範例)
try {
    $pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $pdo->prepare("UPDATE users SET `$field` = ? WHERE id = ?");
    $stmt->execute([$value, $itemId]);

    if ($stmt->rowCount() > 0) {
        exit(json_encode(['success' => true]));
    } else {
        exit(json_encode(['success' => false, 'msg' => '資料未異動']));
    }
} catch (PDOException $e) {
    exit(json_encode(['success' => false, 'msg' => '資料庫錯誤']));
}

進階優化方向

安全性關鍵

• ✅ 白名單驗證欄位名：防止 SQL 欄位注入
• ✅ 參數化查詢：PDO prepare() 防 SQL 注入
• ✅ 型別轉換：(int)$itemId 確保主鍵為整數
• ✅ 權限檢查：確認使用者擁有該資料列編輯權限
• ❌ 禁止：直接拼接 UPDATE ... SET $field = '$value'

這是一個「小而美」的內聯編輯實作，適合後台管理、資料維護介面。生產環境建議封裝為 jQuery Plugin 或 Vue/React Component 復用。