从 HTML 表更新 MySQL，每一行都有自己的表单

Question

我有一个正确显示 MySQL Games 表的 HTML 表。我希望能够编辑游戏表，一次一个游戏。我有一个使用 JQuery 显示的编辑游戏按钮，并用单击它的行中的文本框替换标签，允许用户在重新单击同一个按钮之前编辑值，然后显示“保存更改”。我已更改代码以使用 AJAX 在文本框中发布值，但由于某种原因它不会发布。这是我第一次使用 AJAX，但是我复制并粘贴了代码，所以我不确定这是否是语法问题。

这是 HTML 表格：

echo '<table><tr>
        <th>GameID</th>
        <th>Name</th>
        <th class="inventory">Price</th>
        <th class="catalog">Min Players</th>
        <th class="catalog">Max Players</th>
        <th class="catalog">Time of Play</th>
        <th class="catalog">Player Age</th>
        <th class="catalog">Rating BGG</th>
        <th class="catalog">Game Type 1</th>
        <th class="catalog">Game Type 2</th>
        <th>Box Art</th>
        <th class="catalog">Has Expansions?</th>
        <th class="catalog">Base Set (GameID)</th>
        <th class="catalog">Description</th>
        <th class="inventory">Quantity for Sale</th>
        <th class="inventory">Quantity Playable</th>
        <th class="inventory">Quantity Playing</th>
        <th class="inventory">SupplierID</th>
        <th class="analytics">Custom Rating</th>
        <th class="analytics">Search Count</th>
        </tr>';
        while ($rowG = mysqli_fetch_assoc($result)){
            echo '<tr>
            <td class="gameID"><label name="gameID">' . $rowG["gameID"] . '</label></td>
            <td><label name="gameName">' . $rowG["gameName"] . '</label></td>
            <td class="inventory"><label name="gamePrice">' . $rowG["gamePrice"] . '</label></td>
            <td class="catalog"><label name="playersMin">' . $rowG["playersMin"] . '</label></td>
            <td class="catalog"><label name="playersMax">' . $rowG["playersMax"] . '</label></td>
            <td class="catalog"><label name="timeOfPlay">' . $rowG["timeOfPlay"] . '</label></td>
            <td class="catalog"><label name="playerAge">' . $rowG["playerAge"] . '</label></td>
            <td class="catalog"><label name="ratingBGG">' . $rowG["ratingBGG"] . '</label></td>
            <td class="catalog"><label name="gameType1">' . $rowG["gameType1"] . '</label></td>
            <td class="catalog"><label name="gameType2">' . $rowG["gameType2"] . '</label></td>
            <td><img src="' . $rowG["boxArt"] . '"/></td>
            <td class="catalog"><label name="hasExpansions">' . $rowG["hasExpansions"] . '</label></td>
            <td class="catalog"><label name="expands">' . $rowG["expands"] . '</label></td>
            <td class="catalog"><label name="gameDescription">' . $rowG["gameDescription"] . '</label></td>
            <td class="inventory"><label name="quantityForSale">' . $rowG["quantityForSale"] . '</label></td>
            <td class="inventory"><label name="quantityPlayable">' . $rowG["quantityPlayable"] . '</label></td>
            <td class="inventory"><label name="quantityPlaying">' . $rowG["quantityPlaying"] . '</label></td>
            <td class="inventory"><label name="supplierID">' . $rowG["supplierID"] . '</label></td>
            <td class="analytics"><label name="ratingCustom">' . $rowG["ratingCustom"] . '</label></td>
            <td class="analytics">' . $rowG["searchCount"] . '</td>
            <td class="edit" hidden><input class="editBtn" type="submit" value="Edit Game"/></td>
            </tr>';
        }
        echo '</table>';
    ?>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="inventory.js"></script>

这里是 JQuery 文件的相关部分：

    $('tr').click(function(){
    if (editing == false){
        $('td').removeClass('selected');
        $('.edit').hide();
        $(this).children('td').addClass('selected');
        $(this).children('.edit').show();
    }
});

$('.editBtn').click(function(){

    if (editing == false){
        editing = true;

        $('.selected label').replaceWith(function(){
            return '<input type="text" id="#' + $(this).attr("name") + '" name="' + $(this).attr("name") + '" value="' + $(this).html() + '"/>';
        });
        $('.editBtn').val("Save Changes");
    } else {

        var gameID = $("#gameID").val();

        var dataString = 'gameID=' + gameID;
        $.ajax({
            type: "POST",
            url: "processing/updateGame.php",
            data: dataString,
            success: function(result){
                alert(result);
            }
        });

        $('.editBtn').val("Edit Game");
        editing = false;

        $('.selected input[type=text]').replaceWith(function(){
            return '<label name="' + $(this).attr("name") + '">' + $(this).val() + '</label>';
        });
    }

updateGame.php 中的 echo 语句用于调试。当前将 $gameID 显示为未定义。

$gameID = $_POST['gameID'];

echo 'hello world' . $gameID;

为什么没有正确发布？我正在使用运行 PHP 5.5.14 的 MAMP。不确定这是否相关。

Answer 1

您不能在这样的表格中嵌入表格。无效的 HTML。

这是我的建议。

1) 在表格下方，添加一个隐藏表单。

2) 编辑游戏并点击保存后，将值传递给隐藏表单，然后通过 ajax 提交。