将数据从可编辑表单保存到数据库

Question

我有一个可编辑的表单，允许我在单击特定字段时更改数据，但我无法将新数据保存在数据库中。（代码@fiddle）

html代码

<table>
  <tr>

    <td><span>text</span>
      <input type='text' name='text' value='text' class='toedit' readonly='readonly' />
    </td>

  </tr>

</table>

脚本

$("table").on("focus", "input, select", function() {
  $(this)
    .prop("readonly", false)
    .removeClass("toedit");
});

$("table").on("blur", "input, select", function() {
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
});

$("table").on("click", "td", function() {
  $(this).children().focus();
});

编辑查询是这样的，但不知道如何从脚本中获取值并将其添加到下面的查询中

   $sql1="UPDATE `table_name` set name='".$text."' WHERE id='".$tableid."' ";
if(!mysqli_query($con,$sql1))
    {
        die('Error:' . mysqli_error($con));
    }

table_name的表结构是这样的

id  name
1    N1
2    N2

Answer 1

照做

HTML

  <form name="frm" method="POST" action="">
  <input type="text" name="id" id="id" value="" />
     <input type="text" name="name" id="name" value="" />
     <input type="submit" name="Update" id="update" value="Update" />
    </form>

jQuery

    $("#update").click(function(e) {
      e.preventDefault();
var name = $("#id").val(); 
      var name = $("#name").val(); 
      $.ajax({
        type:'POST',
        data:dataString,
        url:'update.php',
        success:function(data) {
        }
      });
    });

update.php 页面

 <?php
      $name = $_POST['name'];
      $id= $_POST['id'];
      $sql1="UPDATE `table_name` set name='".$name."' WHERE id='".$id."' ";
    if(!mysqli_query($con,$sql1))
        {
            die('Error:' . mysqli_error($con));
        }
    ?>

Answer 2

2 种方法来做到这一点。 1) 创建一个服务器端脚本，它将存储所有表数据并通过 Ajax 调用该脚本。 2) 或者在表单提交时调用服务器端页面。

Answer 3

在您的 $("table").on 函数中，添加 AJAX 以更新您的 SQL。

这是一个以https://phpseason.wordpress.com/2013/02/15/ajax-add-retrieve-mysql-records-using-jquery-php/ 开头的 AJAX 教程。

使用 ajax 将更新后的文本和引用（唯一标识您的记录或行）传递给 PHP 脚本。在该 PHP 脚本中，更新您的 SQL 表。更新表格后，echo 向 AJAX 发送一条成功消息，这将向用户显示一条成功消息。

编辑

使用下面的代码；

$("table").on("blur", "input, select", function() {
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
  var dat = $(this).val();
  $.ajax({
    type:"post",
    url:"process.php",
    data:"data="+dat+"&key="+uniquekey,
    success:function(result){
      if(result == "true"){
        alert("data updated successfully");
      }else{
        alert("try again");
      }
    }
  });
});

在这里，uniquekey 必须是某个东西，它标识了您在表格中的行/条目。连同数据一起发送。 dat 是输入的更新文本。创建一个名为process.php 的文件，在该文件中，您可以使用$_POST["data"] 和$_POST["key"] 捕获内容。

使用键/引用$_POST["key"] 用$_POST["data"] 更新您的表。更新成功后，在你的 php 文件中回显true，否则回显其他内容。如果回显是true，那么您将收到类似data updated successfully 的警报，否则您将收到类似try again 的警报。

这里是小提琴：https://jsfiddle.net/blasteralfred/gss4vv6k/。