Javascript 将可编辑表单中的数据保存到数据库中

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

html代码

<table>
  <tr>

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

  </tr>

</table>

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

   $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

照办

HTML

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));
        }
    ?>

有两种方法可以做到这一点。 1） 创建一个服务器端脚本，该脚本将存储所有表数据，并通过Ajax调用该脚本。 2） 或者调用表单submit上的服务器端页面。

在

$（“表”）中。在
函数中，添加AJAX以更新SQL

这里是一个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
的文件，在该文件中，您可以使用
$\u POST[“data”]
和
$\u POST[“key”]
捕获内容

使用键/参考键用
$\u POST[“data”]
更新表。成功更新后，在php文件中回显
true
，否则回显其他内容。如果回音为
true
，则您将收到类似
数据成功更新的警报
，否则，您将收到类似
重试的警报

问题是：。
您需要一种服务器端编程语言来将某些内容保存到数据库。@caramba已经更新了帖子，我有服务器端查询，但不知道如何链接这两个字段。可能您忘记添加包装所有输入字段的
。另外，别忘了在表单标签中指定操作和方法这应该是一个注释，而不是回答这是一个简单的表单，我可以通过它编辑数据，但我希望使表单可编辑，因为我的帖子中显示的fiddlelink由您提供，基本上显示了获取数据并显示它们的表单，我希望输入字段本身应该是可编辑的，请看一下提供的小提琴，我希望表单是这样的
    $("#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) {
        }
      });
    });

 <?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));
        }
    ?>

$("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");
      }
    }
  });
});