Got it, let's fix this up step by step so you can select two cells, swap their values, and update the database via AJAX. Here's the breakdown:

First, we need to let users select up to two cells (and deselect if they click a selected one). We'll track selected cells in an array to keep things organized:

// Track selected cells globally
let selectedCells = [];

$("#table td").click(function () {
    const $currentCell = $(this);

    // If clicking an already selected cell, deselect it
    if ($currentCell.hasClass('selected')) {
        $currentCell.removeClass('selected');
        selectedCells = selectedCells.filter(cell => cell !== $currentCell[0]);
        return;
    }

    // If two cells are already selected, clear all selections first
    if (selectedCells.length === 2) {
        $(selectedCells).removeClass('selected');
        selectedCells = [];
    }

    // Add current cell to selected list
    $currentCell.addClass('selected');
    selectedCells.push($currentCell[0]);
});

Next, update the swap button handler to check for two selected cells, swap their values, and send the update to your database:

$('.swapbutton').on('click', function (e) {
    e.preventDefault();

    // Make sure exactly two cells are selected
    if (selectedCells.length !== 2) {
        alert('Please select exactly two cells to swap!');
        return;
    }

    const $cell1 = $(selectedCells[0]);
    const $cell2 = $(selectedCells[1]);

    // Grab values and database IDs (we'll add data-id to the HTML next)
    const value1 = $cell1.html().trim();
    const value2 = $cell2.html().trim();
    const id1 = $cell1.data('id');
    const id2 = $cell2.data('id');

    // Swap values on the frontend first
    $cell1.html(value2);
    $cell2.html(value1);

    // Clear selections after swap
    $cell1.removeClass('selected');
    $cell2.removeClass('selected');
    selectedCells = [];

    // Send update to database via AJAX
    $.ajax({
        url: '/your-update-endpoint', // Replace with your backend URL (e.g., swap.php)
        method: 'POST',
        data: {
            recordId1: id1,
            newValue1: value2, // Cell 1 now holds cell 2's original value
            recordId2: id2,
            newValue2: value1  // Cell 2 now holds cell 1's original value
        },
        success: function(response) {
            alert('Swap successful! Database updated.');
            console.log('Server response:', response);
        },
        error: function(xhr, status, error) {
            // Rollback frontend values if AJAX fails
            $cell1.html(value1);
            $cell2.html(value2);
            alert('Oops, failed to update the database. Please try again.');
            console.error('AJAX Error:', error);
        }
    });
});

Add a data-id attribute to each <td> so your backend knows which database records to update. This should match the unique ID of each record in your database:

<table id="table">
    <tr>
        <td data-id="1">Apple</td>
        <td data-id="2">Banana</td>
        <td data-id="3">Cherry</td>
    </tr>
    <tr>
        <td data-id="4">Date</td>
        <td data-id="5">Elderberry</td>
        <td data-id="6">Fig</td>
    </tr>
</table>

<button class="swapbutton">Swap Selected Values</button>

You'll need a backend endpoint to handle the AJAX request. Here's a simple PHP example using PDO (make sure to adjust it to your database schema):

<?php
// Connect to your database (replace with your credentials)
$pdo = new PDO('mysql:host=localhost;dbname=your_database', 'your_username', 'your_password');

// Get POST data
$id1 = $_POST['recordId1'];
$newValue1 = $_POST['newValue1'];
$id2 = $_POST['recordId2'];
$newValue2 = $_POST['newValue2'];

try {
    // Use a transaction to ensure both updates succeed or fail together
    $pdo->beginTransaction();

    // Update first record
    $stmt1 = $pdo->prepare("UPDATE your_table SET your_column = :value WHERE id = :id");
    $stmt1->execute([':value' => $newValue1, ':id' => $id1]);

    // Update second record
    $stmt2 = $pdo->prepare("UPDATE your_table SET your_column = :value WHERE id = :id");
    $stmt2->execute([':value' => $newValue2, ':id' => $id2]);

    $pdo->commit();
    echo json_encode(['success' => true]);
} catch (Exception $e) {
    $pdo->rollBack();
    echo json_encode(['success' => false, 'error' => $e->getMessage()]);
}
?>

• Security: Always validate and sanitize input on the backend to prevent SQL injection. The PDO prepared statements above help with this.
• User Experience: You could add a loading state (e.g., disable the swap button) while the AJAX request is in flight to prevent duplicate clicks.
• Error Handling: The AJAX error handler rolls back the frontend values if the database update fails, so users don't see incorrect data.

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