使用 contentEditable 属性使用 JavaScript 编辑表格

问题描述 投票:0回答:1

编辑数据并单击保存更改按钮后,屏幕中的数据发生更改,但数据库中并未更新

<?php

$con = mysqli_connect("localhost", "root", "", "myDB");

if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
}

if ($_SERVER['REQUEST_METHOD'] == "POST" && isset($_POST['data'])) {
    $data = json_decode($_POST['data'], true);
    
    foreach ($data as $row) {
        $vegName = htmlspecialchars($row['vegName']);
        $price = htmlspecialchars($row['price']);
        $isnew = $row['isnew'];
        $id = intval($row['id']); 

        if ($isnew === 'true') {
            $query = "INSERT INTO priceList (vegetable, price) VALUES (?, ?)";
            $stmt = mysqli_prepare($con, $query);
            if (!$stmt) {
                echo "Prepare failed: (" . mysqli_error($con) . ")"; 
                continue; 
            }
            mysqli_stmt_bind_param($stmt, "ss", $vegName, $price);
        } else {
            $query = "UPDATE priceList SET vegetable = ?, price = ? WHERE id = ?";
            $stmt = mysqli_prepare($con, $query);
            if (!$stmt) {
                echo "Prepare failed: (" . mysqli_error($con) . ")"; 
                continue; 
            }
            mysqli_stmt_bind_param($stmt, "ssi", $vegName, $price, $id);
        }

        if (!mysqli_stmt_execute($stmt)) {
            echo "Execute failed: (" . mysqli_stmt_error($stmt) . ")"; 
        } else {
            echo "Changes saved for $vegName!";
        }
        mysqli_stmt_close($stmt); 
    }
    
    exit; 
}

?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vegetable Price List</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body style="background-color:#FAEBD7">
    <div>
    <h1>Vegetable Price List</h1>
    <table id="vegTable">
        <tr>
            <th>ID</th>
            <th>Vegetable</th>
            <th>Price</th>
        </tr>
        <?php 
        
        $sql = "SELECT vegetable, price, id FROM priceList"; 
        $result = mysqli_query($con, $sql);

        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_assoc($result)) {
                echo "<tr data-isnew='false'>
                        <td contenteditable='true'>" . htmlspecialchars($row["id"]) . "</td>
                        <td contenteditable='true' data-vegname='" . htmlspecialchars($row["vegetable"]) . "'>" . htmlspecialchars($row["vegetable"]) . "</td>
                        <td contenteditable='true'>" . htmlspecialchars($row["price"]) . "</td>
                      </tr>";
            }
        } else {
            echo "<tr><td colspan='3'>No vegetables found.</td></tr>";
        }
        ?>
    </table>
    <button type="button" onclick="saveChanges()">Save Changes</button>
    <button type="button" onclick="addRow()">Add Vegetable</button>

    <script>
        function saveChanges() {
            var table = document.getElementById('vegTable');
            var rows = table.getElementsByTagName('tr');
            var data = [];

            for (var i = 1; i < rows.length; i++) { 
                var vegName = rows[i].cells[1].getAttribute('data-vegname') || rows[i].cells[1].innerText;
                var price = rows[i].cells[2].innerText;
                var id = rows[i].cells[0].innerText;
                var isnew = rows[i].getAttribute('data-isnew') === 'true';
                data.push({ vegName: vegName, price: price, isnew: isnew, id: id });
            }

            console.log(JSON.stringify(data));

            var xhr = new XMLHttpRequest();
            xhr.open('POST', "<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>", true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function () {
                alert(xhr.responseText);
            };
            xhr.send('data=' + JSON.stringify(data));
        }
        
        function addRow() {
            var table = document.getElementById('vegTable');
            var newRow = document.createElement("tr");
            newRow.setAttribute('data-isnew', 'true');

            var idCell = document.createElement('td');
            idCell.textContent = ""; 
            newRow.appendChild(idCell);

            var vegCell = document.createElement('td');
            vegCell.contentEditable = "true";
            vegCell.textContent = "";
            newRow.appendChild(vegCell);

            var priceCell = document.createElement("td");
            priceCell.contentEditable = "true";
            priceCell.textContent = "";
            newRow.appendChild(priceCell);

            table.appendChild(newRow);
        }
    </script>
    </div>
</body>
</html>

<?php

mysqli_close($con);
?>

我试图创建一个用户友好的可编辑蔬菜管理系统,但失败了。问题在于数据库,因为一旦编辑表并按下保存更改按钮,它就不会更新。

javascript php html ajax database
1个回答
0
投票

您好,我发现您的大部分代码都有效,如果表中已有蔬菜,您可以更新现有蔬菜的价格,但您的代码中有一个错误,该错误会阻止添加新蔬菜,我认为这可能是您的问题问什么?

当您添加新蔬菜时它没有保存到数据库的原因是因为 PHP 中的这一行

if ($isnew === 'true') {

这是因为您使用的是 === 并且它正在进行字面比较,这意味着它会检查 $isnew 是否是文本为“true”的字符串。 $isnew 是一个布尔值,因此返回 false。

如果您更改代码,使其与布尔值进行字面比较,如下所示:

if ($isnew === true) { // notice the ' have been removed

它有效,您可以将新蔬菜保存到数据库中。

虽然此解决方案允许您将新蔬菜保存到数据库中,但在不刷新页面的情况下更新新添加的蔬菜还有一段路要走。这是因为在数据库中创建新蔬菜时,表格中没有填充 ID。此外,如果蔬菜是新的,并且您多次单击“保存更改”按钮,则会多次添加蔬菜。

© www.soinside.com 2019 - 2024. All rights reserved.