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

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