Question

我想要做的是当我双击一个单元格时，会出现一个文本框来更新单元格数据。然后我想要更新值。现在我试过这个：

     $('#previsionnel td').dblclick(function () {
        var $this = $(this);
        var input = $('<input>', {
            value: $this.text(),
            type: 'text',
            blur: function () {
                 $this.text(this.value);
            },
            keyup: function (e) {
                if (e.which === 13)
                    input.blur();
            }
        }).appendTo($this.empty()).focus();

        var test = $this.find("input").val();
        console.log(test);

        $('#previsionnel td').change(function () {
            console.log(test);
        });
    });

一切正常，除了我无法使用$(this).text()更新数据在我的控制台日志中，结果为空。

应该做的一些截图：

正如您在上一个屏幕截图中看到的那样，控制台中的第二个值必须是5000而不是100000.00。

Answer 1

首先，您需要在下面的函数中使用$(this).val()：

blur: function() {
  $(this).val(this.text);
},

其次，由于您的input是td的孩子，因此请使用.find("input")，如下所示：

var test = $(this).find("input").val();

我还将您的.change()功能移出了.dblclick()。原因是上面的“测试”变量只会在你双击td时设置，而不是在你改变它时设置。

$('#previsionnel td').dblclick(function() {
  var input = $('<input>', {
    value: $(this).text(),
    type: 'text',
    blur: function() {
      $(this).val(this.text);
    },
    keyup: function(e) {
      if (e.which === 13)
        input.blur();
    }
  }).appendTo($(this).empty()).focus();

  var test = $(this).find("input").val();
  console.log(test);
  $('#previsionnel td').change(function() {

    test = $(this).find("input").val();
    console.log(test);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="previsionnel">
  <tr>
    <td>something</td>
  </tr>
</table>

Answer 2

1）存在语法错误 - 未关闭的处理程序dblclick

 $('#previsionnel td').dblclick(function () {
            var input = $('<input>', {
                value: $(this).text(),
                type: 'text',
                blur: function () {
                    $(this).text(this.value);
                },
                keyup: function (e) {
                    if (e.which === 13)
                        input.blur();
                }
            }).appendTo($(this).empty()).focus();

            var test = $(this).text();
            console.log(test);

            $('#previsionnel td').change(function () {
                console.log(test);
            });
});

2）如果您使用AJAX逻辑获取表中的数据，请尝试使用事件处理程序on();。因为

'委托事件的优势在于它们可以处理来自的事件以后添加到文档中的后代元素。'

E.g。

$('body').on('dblclick', '#previsionnel td', function () {
            var input = $('<input>', {
                value: $(this).text(),
                type: 'text',
                blur: function () {
                    $(this).text(this.value);
                },
                keyup: function (e) {
                    if (e.which === 13)
                        input.blur();
                }
            }).appendTo($(this).empty()).focus();

            var test = $(this).text();
            console.log(test);

            $('#previsionnel td').change(function () {
                console.log(test);
            });
});

Answer 3

在此行中$(this).val(this.text); this引用文本框。我猜你想要更新td？请尝试以下代码段

＆＃13;

$('#previsionnel td').on( "dblclick", function() {
  var input = $('<input>', {
    value: $(this).text(),
    type: 'text',
    blur: function() {
      $(this).parent("td").text($(this).val());
      $(this).hide();
    },
    keyup: function(e) {
      if (e.which === 13)
        input.blur();
    }
  }).appendTo($(this).empty()).focus();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="previsionnel">
  <tr>
    <td>something</td>
    <td>something2</td>
  </tr>
</table>

＆＃13;

Answer 4

var input; // Please declare input as globaly declare
   $('#previsionnel td').dblclick(function () {
            var test;
            input = $('<input>', {
                value: $(this).text(),
                type: 'text',
                blur: function () {
                   test = $(this).text(this.value);
                },
                keyup: function (e) {
                    if (e.which === 13)
                        input.blur();
                }
            }).appendTo($(this).empty()).focus();

            var test = $(input).val();//use input variable instead this
            console.log(test);            
         });   
         $(document).on('blur','input',function () {
             console.log($(this).val()); //get value outside event listener
         });

如何使用jQuery获取a的值？

4 个答案: