Question

我有一个表，我使用ajax从我的MySQL库中获取。来自ajax的答案使表格成为DIV包装器。

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

我的计划是让$('td').click()附加一个输入，按下输入或点击任意位置后，应隐藏输入，并显示带有新值的清晰TD。之后，我按下UPDATE按钮并将我的行保存到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上点击了很多次而不是一次。也许我做错了，它可以更容易实现？

Answer 1

我没看到我的定义。我把你的功能改成了这样：

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

});
}

更新了小提琴https://jsfiddle.net/vf2L78p8/2/

创建一个可编辑的表并保存到数据库

1 个答案: