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为undefined。

$gameID = $_POST['gameID'];

echo 'hello world' . $gameID;

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

Answer 1

您无法在表格中嵌入表单。 HTML无效。

这是我的建议。

1）在表格下方添加隐藏表格。

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

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

1 个答案: