制作可编辑的表格并保存到数据库

debugcn 发表于 Dev

死神4

我有一个使用 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 上获得了很多点击，而不是一次。也许我做错了，它可以更容易地实现？

康明达07

我没有看到我在哪里定义。我将您的功能更改为如下所示：

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。