Question

我有一个我希望可编辑的产品列表。当用户点击编辑按钮时，只需要更改所选产品的内容（例如，更改为文本框，以便用户可以动态编辑标题）。但是我如何阻止php回应所有产品的文本框 - 我想它会自动完成？

我还猜我应该使用一些Jquery的东西来编辑内容：P？

列表正在循环播放：

$items = $mysqli->query("SELECT product_name, product_id FROM products");
  while($products = $items->fetch_assoc(){
    echo $products['product_name'];
    echo '<a href="editindiv">Edit me</a>';
  }

Answer 1

正如你的第一个评论者指出的那样，单凭PHP还不够。您需要能够在浏览器中传达更改的页面JS代码，以及可以执行这些更改并将其重新运行到数据库中的PHP脚本。您可以自己编写，也可以使用专门为此目的而存在的经过验证的库，例如http://backbonejs.org/或http://angularjs.org/

这些是模型/视图框架，可让您在页面上显示数据库数据视图，同时保持其可编辑状态，在线更新条目时更新数据库记录。但要注意：如果你从未使用过MVC框架，那么你可能会期待最初可能会非常困惑。这种方法与更简单的“使用PHP从数据库获取数据，生成页面内容，发送到客户端，结束”方法完全不同。

Answer 2

不一定是效率最高的，但如果没有大量的产品如何为每个产品包含一个简单的表单而只是隐藏它直到点击“编辑”链接？

列表/表格：

$items = $mysqli->query("SELECT product_name, product_id FROM products");
while($products = $items->fetch_assoc(){
  echo "<span>" . $products['product_name'] . "</span>";
  echo "<a class='editButton'>Edit</a>";
  echo "<form action='products.php' method='post' style='display: none;'>
        <input type='hidden' name='product' value='" . $products['prodcut_id'] . "' >
        <input type='text' name='title' value='" . $products['product_name'] . "' >
        <input type='submit' value='Update' >
        </form>";
  echo "<br/>";  
}

jQuery：

$(".editButton").click(function(){
  //Hide the text entry and the edit link
  $(this).prev().hide();
  $(this).hide();
  //Show the form
  $(this).next().show();
});

如果您不想重新加载页面以提交更改，您也可以通过ajax提交它们，以获得更加动态的用户体验。

如何制作内联可编辑内容？

2 个答案: