Can't replace value in table cell with inline jquery editing

Question

it is a while that I'm stuck on this issue: I would like to make a sort of excel spreadsheet (well, just few columns of a table), but I'm not able to set the new value.

Here is the (not) working fiddle .

Steps:

• double click on yellow cell
• fill in the new value
• blur or press enter key

The old value is still there... I don't know why this is happening, I thought I had to handle this with clone() but the result was the same.

Note: I have to do this because I don't want to overwrite/lose the € , % , £ sign. I guess this can also be achieved with css only, but I don't know how to do it

Answer 1

You almost had it right, except for a small error when putting everything pack into $td .

Replace this code:

$(prev_html).find('span').text( new_val );
$td.html( prev_html );

With this:

$td.html(prev_html);
$td.find('span').text(new_val);

Doing $(prev_html) creates DOM objects in memory based on prev_html , and then you manipulate those DOM objects. But that does not change prev_html , which is what you seemed to expect.

What I did is put prev_html back into $td ( first new line ) and then proceed by manipulating $td ( second new line ).

See the new Fiddle .

And as a Snippet:

 $('.can-edit-this').on('dblclick', function(){ var $td = $(this).closest('td'); $td.addClass('editing'); prev_html = $td.html(); var $input = $('<input class="form-control" type="text" id="can-edit-this-field" name="" value="'+$(prev_html).text()+'" style="table-layout: fixed;" />'); $td.html($input); $input.focus(); $input.on('blur', function(){ var new_val = $(this).val(); $td.html(prev_html); $td.find('span').text( new_val ); $td.removeClass('editing'); prev_html=''; }); $input.on('keypress', function(e){ if(e.which == 13){ $(this).trigger('blur'); } }); }); 

 table td {width: 50px !important} .can-edit-this {background-color: #fcefa1;} .can-edit-this.editing {padding:0 !important} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table table-bordered"> <tbody> <tr> <td>Row 1</td> <td class="can-edit-this"><span>123</span>€</td> <td class="can-edit-this"><span>234</span>%</td> <td class="can-edit-this"><span>345</span>£</td> <td></td> </tr> <tr> <td>Row 2</td> <td class="can-edit-this"><span>123</span>€</td> <td class="can-edit-this"><span>234</span>%</td> <td class="can-edit-this"><span>345</span>£</td> <td></td> </tr> <tr> <td>Row 3</td> <td class="can-edit-this"><span>123</span>€</td> <td class="can-edit-this"><span>234</span>%</td> <td class="can-edit-this"><span>345</span>£</td> <td></td> </tr> <tr> <td>Row 4</td> <td class="can-edit-this"><span>123</span>€</td> <td class="can-edit-this"><span>234</span>%</td> <td class="can-edit-this"><span>345</span>£</td> <td></td> </tr> <tr> <td>Row 5</td> <td class="can-edit-this"><span>123</span>€</td> <td class="can-edit-this"><span>234</span>%</td> <td class="can-edit-this"><span>345</span>£</td> <td></td> </tr> </tbody> </table>