使用 php 保存可编辑表中的值答案

【问题标题】：save values from editable table using php使用 php 保存可编辑表中的值
【发布时间】：2016-06-10 15:33:09
【问题描述】：

嗨，我有一个从 php 生成的表，它是可编辑的，我想将编辑后的值保存到数据库中。我不知道该怎么做，因为页面上有很多行（动态）。这是屏幕截图：-

请推荐

编辑：-

我的代码是

    echo "<table border='1'>
<tr>
<th>Sl Number</th>
<th>Product Id</th>
<th>Product Name</th>
<th>Product Catagory</th>
<th>Retal Price</th>
<th>Max Price</th>
<th>Min Price</th>
<th>Initial Stock</th>
<th>Quantity Sold</th>
<th>Current Stock</th>
<th>Last Order</th>
<th>Edit/Update</th>
</tr>";
while($row = $result->fetch_assoc())
{
        echo "<tr contenteditable>";
    echo "<td>" . $row["Row Number"]. "</td>";
    echo "<td>" . $row["Product Id"]. "</td>";
    echo "<td>" . $row["Product Name"]. "</td>";
    echo "<td>" . $row["Product Catagory"]. "</td>";
    echo "<td>" . $row["Retal Price"]. "</td>";
    echo "<td>" . $row["Max Price"]. "</td>";
    echo "<td>" . $row["Min Price"]."</td>";
    echo "<td>" . $row["Initial Stock"]."</td>";
    echo "<td>" . $row["Quantity Sold"]. "</td>";
    echo "<td>" . $row["Current Stock"]."</td>";
    echo "<td>" . $row["Last Order"]."</td>";
    echo "<td contenteditable = 'false'><button href = '#'>Update</a></td>";
        echo "</tr>";   
}

【问题讨论】：

你的代码在哪里？
用户是按记录提交记录还是允许多次编辑？
允许多次编辑，甚至可以通过单击一次按钮保存所有值（多行）。请建议
我已准备好根据我得到的分析和反馈来改变它的方式..
如果你想保存整个表格，那为什么每一行都有更新按钮？

标签： php html html-table

【解决方案1】：

让我给你最好的方法首先，您的数据库表有空格：更正例如

从$row["Initial Stock"] 到$row["Initial_Stock"]

那我会建议你使用 ajax 而不是浪费时间点击按钮

HTML 页面

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
 <script>
$(function(){

    $("#loading").hide();
    //acknowledgement message
    var message_status = $("#status");
    $("td[contenteditable=true]").blur(function(){
        var field_userid = $(this).attr("id") ;
        var value = $(this).text() ;



        $.post('update.php' , field_userid + "=" + value, function(data){



            if(data != '')
            {
                message_status.show();
                message_status.text(data);
                //hide the message
                setTimeout(function(){message_status.hide()},1000);
            }
        });
    });




});
</script>


<style>
table.zebra-style {
    font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    text-align:left;
    border:1px solid #ccc;
    margin-bottom:25px;
    width:100%
}
table.zebra-style th {
    color: #444;
    font-size: 13px;
    font-weight: normal;
    padding: 5px 4px;

}
table.zebra-style td {
    color: #777;
    padding: 4px;
    font-size:13px;

}
table.zebra-style tr.odd {
    background:#f2f2f2;
}


#status { padding:10px; position:fixed; top:10px; border-radius:5px; z-index:10000000; background:#88C4FF; color:#000; font-weight:bold; font-size:12px; margin-bottom:10px; display:none; width:100%; }
#loading { padding:10px; position:absolute; top:10px; border-radius:5px; z-index:10000000; background:#F99; color:#000; font-weight:bold; font-size:12px; margin-bottom:10px; display:none; width:100%; }
</style>

 <div id="status"> </div>
 <div id="loading"></div>





<table id="tableID" border="0"  class="sortable table zebra-style">


<thead>
  <tr>
    <th>Sl Number</th>
    <th>Product Id</th>
    <th>Product Name</th>
    <th>Product Catagory</th>
    <th>Retal Price</th>
    <th>Max Price</th>
    <th>Min Price</th>
    <th>Initial Stock</th>
    <th>Quantity Sold</th>
    <th>Current Stock</th>
    <th>Last Order</th>
    <th>Edit/Update</th>
  </tr>
</thead>
<tbody  class="list">
  <?php do { ?>


  <tr>
    <td contenteditable="true" id="Row_Number:<?php echo $row["Row_Number"]; ?>"><?php echo $row["Row_Number"]; ?></td>
    <td contenteditable="true" id="Product_Id:<?php echo $row["Product_Id"]; ?>"><?php echo $row["Product_Id"]; ?></td>
    <td contenteditable="true" id="Product_Name:<?php echo $row["Product_Name"]; ?>"><?php echo $row["Product_Name"]; ?></td>
    <td contenteditable="true" id="Product_Catagory:<?php echo $row["Product Id"]; ?>"><?php echo $row["Product_Catagory"]; ?></td>
    <td contenteditable="true" id="Retal_Price:<?php echo $row["Retal_Price"]; ?>"><?php echo  $row["Retal_Price"]; ?></td>
    <td contenteditable="true" id="Max_Price:<?php echo $row["Max_Price"]; ?>"><?php echo $row["Max_Price"]; ?></td>
    <td contenteditable="true" id="Min_Price:<?php echo $row["Min_Price"]; ?>"><?php echo  $row["Min_Price"]; ?></td>
    <td contenteditable="true" id="Initial_Stock:<?php echo $row["Initial_Stock"]; ?>"><?php echo  $row["Initial_Stock"]; ?></td>
    <td contenteditable="true" id="Quantity_Sold:<?php echo $row["Quantity_Sold"]; ?>"><?php echo  $row["Quantity_Sold"]; ?></td>
    <td contenteditable="true" id="Last_Order:<?php echo $row["Last_Order"]; ?>"><?php echo  $row["Last_Order"]; ?></td>
    <td contenteditable="true" id="Last_Order:<?php echo $row["Last_Order"]; ?>"><?php echo  $row["Last_Order"]; ?></td>
    <td contenteditable = 'false'></td>";



    </tr>

    <?php } while($row = $result->fetch_assoc()) ?>
 </tbody>
</table>

还有更新php页面

   <?php  


$db = new PDO('mysql:host=localhost;dbname=testdb;charset=UTF-8', 
                  'username', 
                  'password',
                  array(PDO::ATTR_EMULATE_PREPARES => false,
                  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


?>

<?php
if(!empty($_POST))
{
    //database settings

    foreach($_POST as $field_name => $val)
    {
        //clean post values
        $field_id = strip_tags(trim($field_name));

        //from the fieldname:user_id we need to get user_id
        $split_data = explode(':', $field_id);
        $product_id = $split_data[1];
        $field_name = $split_data[0];
        if(!empty($product_id) && !empty($field_name) && !empty($val))
        {

            $affected_rows = $db->exec("UPDATE yourtable SET $field_name = '$val' WHERE product_ID = $product_id");
            echo $affected_rows;

            echo "Updated";
        } else {
            echo "Invalid Requests";
        }
    }
} 

else {
    echo "Invalid Requests";
}
?>

【讨论】：

@trincot 我真的不知道 mysqli 和 PDO 的事情。请您在 php 部分编辑我的代码吗？关于 mysqli 和 PDO，我看到了在那里使用的正确代码。我也在学习
@trincot 现在我已将其更新为符合 PDO
我把我的反对票变成了赞成票，但你仍然有mysql_real_escape_string。您应该改用 PDO prepare。

【解决方案2】：

要保存整个表格，您可以不使用行级更新按钮，而只有一个保存按钮：

<button id="save">Save</button>
<div id="msg"></div>

msg 区域是在执行保存操作时显示来自服务器的反馈。

然后你将添加这个 JavaScript 来处理保存按钮的点击：

$('#save').click(function() {
    var data = []; 
    $('td').each(function() {
        var row = this.parentElement.rowIndex - 1; // excluding heading
        while (row >= data.length) {
            data.push([]);
        }
        data[row].push($(this).text());
    });
    $.post('savetable.php', {table: data}, function (msg) {
        $('#msg').text(msg);
    });
});

这会将没有标题行的 HTML 表格内容转换为 JavaScript 矩阵，然后将其发送到 savetable.php 进行处理。

在 PHP 中，您将使用 $_POST['table'] 访问该数组。实现此功能时，首先进行调试，然后执行var_dump($_POST['table']) 以确保数据正确传输，并且具有您期望的数组结构。

然后遍历该数组以将行插入到您的数据库中。您可以为此使用 mysqli 或 PDO。

PHP 脚本 savetable.php 应该只回显一条消息：确认（“表已成功保存”）或错误消息（“出现问题。您的数据未保存。” ）。

它不应该重现表格的 HTML，因为它已经显示在浏览器中。 JavaScript 代码将使用任何 PHP 打印输出，以显示在保存按钮下方。

这是 savetable.php 的样子。但是请仔细调试，我没有测试这段代码。当然，在它工作之前，您首先需要设置您的数据库模型：

$db = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8mb4', 
              'username', 'password');
// Configure that all database errors result in an exception:
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

try {
    // Make a transaction: this allows to rollback any of the changes
    // if anything goes wrong before the end of it. 
    $db->beginTransaction();
    // First delete all rows.
    $db->exec("DELETE FROM mytable");
    // Prepare a statement that will be executed for each row.
    // Needs to be extended for all columns:
    $stmt = $db->prepare("INSERT INTO mytable (sl_num, product_id, product_name)
                          VALUES (?, ?, ?)");

    foreach ($_POST('table'] as $row) {
        $stmt->execute($row); // the columns are passed to the prepared statement.
    }
    // All went well: commit the changes.
    $db->commit();
    echo "Table saved successfully";
} catch(PDOException $e) {
    // Something went wrong: roll back any changes made
    $db->rollback();
    echo "An error occurred: " . $e->getMessage();
}

【讨论】：

savetable.php 现在的样子
这看起来很危险吗？您删除所有内容然后再次插入。或者这就是 PDO 的工作方式
我在我的代码中解释说，只有在一切正常的情况下才能进行任何更改。所以要么全有，要么全无。这就是为什么有一个交易被打开。因此，如果 INSERT 失败，DELETE 的效果将通过调用回滚自动恢复。这不是特定于 PDO，而是特定于 SQL 数据库。这样您就不需要单独的 DELETE、UPDATE 和 INSERT 代码来模拟网页中的行删除、插入和更新。

【解决方案3】：

您可以做的是对 php 进行 ajax 调用，其中包含您要保存的行的 id 和新数据。然后使用 PDO 连接数据库并更新信息。完成后，使用 javascript 编辑表格本身。

因此，您需要做的是查找如何使用 ajax 调用和使用 PDO。我建议您在回显表格本身时 <button href = '#' onclick="updateRow('. $row['Row Number'] .')">Update</a></td> 其中 Row Number 是数据库中的 ID，updateRow() 是您将创建的用于获取新信息并通过 ajax 发送的 javascript 函数。不要使用 mysql_*，因为 php 7 不支持它，它很快就会死掉。改为查找 PDO。

【讨论】：