Javascript 制作一个可编辑的表并保存到数据库

我有一个使用ajax从MySQL数据库中获取的表。来自ajax的答案将表放入DIV包装器中

现在我需要编辑这个表，如果需要保存它，但是我有几个问题

我的计划是制作一个$'td'。单击追加一个输入，然后按enter键或单击应隐藏输入的任何位置，并显示带有新值的清除td。之后，我按下更新按钮并将我的行保存到DB。 但是我的JavaScript技能不是很好，即使有100个例子，我也失败了

这是我的密码：

$('#load').click(function() {
  //the load button - gets the table from DB  
  //here I get some data from the website filter.
  var data = new webmaster(pid, name, email, skype, web, current_offer, lookingfor_offer, anwsered, comment);
  data = JSON.stringify(data);

  $('#aw-wrapper').empty();
  $.ajax({
    type: "POST",
    data: {
      "data": data
    },
    url: "inc/load-web.php",
    success: function(anwser) {
      $('#aw-wrapper').html(anwser);
      TableEdit();
    }

  });

});

function TableEdit() {

  if (i) {
    $('td').click(function() {

      this.onclick = null;
      var td_value = $(this).html();
      var input_field = '<input type="text" id="edit" value="' + td_value + '" />'
      $(this).empty().append(input_field);
      $('input').focus();
      i = 0;
    });
  }
}

---

但它根本不起作用。我在td上点击了很多次，而不是一次。也许我做错了，可以更容易地实现

我看不出我的定义在哪里。我将您的函数更改为如下所示：

function TableEdit() {
var i = 1;

$('td').click(function() {
        if (i) {
    this.onclick = null;
    var td_value = $(this).html();
    var input_field = '<input type="text" id="edit" value="' + td_value + '" />'
    $(this).empty().append(input_field);
    $('input').focus();
    i = 0;
    }

});
}

如果我理解你想要什么，我相信它会给出期望的结果，然而，这就是我将如何实现这一点

function TableEdit() {


$('td').click(function() {


    var td_value = $(this).html();
    var input_field = '<input type="text" id="edit" value="' + td_value + '" />'
    $(this).empty().append(input_field);
    $('input').focus();

    $('td').off('click');

    $(this).find('input').blur(function(){
        var new_text = $(this).val();
        $(this).parent().html(new_text);
        TableEdit();
    })

});
}

---

更新的fiddle

您还可以查看类似的库。php文件返回了什么？包含数据库数据的HTML表？是包含数据库数据的HTML表！这很难做到，所以我应该用磅？不-它没有。每次i=1，因此每次单击都会生成一个新的输入。我创建了一个小提琴，它可以满足您的需要吗？这是我需要的一部分。但是谢谢你。为什么fiddle中的相同代码可以正常工作，而我的js文档中的代码却无法正常工作？我的代码有很多输入。您是否也将if语句移动到click函数中？当if语句在外部时，我得到了你所说的错误。谢谢。我找到了一个缩短的方法：$this.unbind'click'；也许你知道如何获得模糊事件？当输入失去焦点时，我需要再次向td输入，但我不知道怎么做