How to get the value of a <td> with jQuery?

Question

What I want to do is when I double click on a cell a textbox appears to update the cell data. Then I want to get the value updated. For now I tried this :

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

Everything works, except I just can't get the data updated with $(this).text() In my console log the result is empty.

Some screenshots of what is supposed to do :

As you can see in the last screenshot, the second value in the console must be 5000 and not 100000.00.

Answer 1

First you need to use $(this).val() in the function below:

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

Second, Because your input is a child of td then use .find("input") as in:

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

I've also moved your .change() function out of your .dblclick() . Reason is that the above "test" variable will only be set when you double click the td, not when you change it.

 $('#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) There is syntax error - unclosed handler 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) If you use AJAX logic for getting data in the table, try to use event handler on(); . Because

'Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.'

Eg

$('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

In this line $(this).val(this.text); this refers to the text box. I am guessing you want to update the td? Try the below snippet

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

 <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> 

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