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


Updating MySQL from HTML table, each row has own form

我有一个HTML表,它可以正确地显示MySQL游戏表。我希望能够编辑游戏表,一次一个游戏。我有一个"编辑游戏"按钮,它与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;

为什么没有正确的张贴?我使用的是MAMP,它运行的是PHP 5.5.14。不确定这是否相关。

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

这是我的建议。

1) 在表格下面,添加一个隐藏表单。

2) 编辑游戏并点击save后,将值传递到隐藏表单,然后通过ajax提交。