JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: auto;" id="tblEditavel" >
<thead>
   <tr>

      <th style=" text-align: center; width: 50px; ">Valor</th>

   </tr>
</thead>

<tbody>

<tr>

    <td class="editavel" style="text-align: center; width: auto ; font-weight: bold;"> abc </td>


  </tr>
</tbody>
</table>

JavaScript

jQuery(function($) {


            $('#tblEditavel tbody tr td.editavel').dblclick(function(){
      //$('.editavel').dblclick(function(){
console.log("isads")
                if($('td > input').length > 0){ // verifica se já existe algum input já na <td>
                   return;
                }

          console.log('teste');

                var conteudoOriginal = $(this).text();
                var novoElemento = $("<input type='text' value='"+conteudoOriginal.trim()+"' class='campo_altera' />");      

                $(this).html(novoElemento.bind('blur keydown', function(e){

                var keyCode = e.which;
                var conteudoNovo = $(this).val();

                    if(keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal){

                        var objeto = $(this);

                        $.ajax({
                            type:"POST",
                            url:"assets/php/alterar_vt.php",
                            data:{

                                valor_antigo:conteudoOriginal,
                                valor_novo:conteudoNovo

                            },
                            success:function(result){
                                objeto.parent().html(conteudoNovo);
                                $('body').append(result);
                            }
                        })


                    }else if( keyCode == 27 || e.type == 'blur')

                        $(this).parent().html(conteudoOriginal);
                }));

                $(this).children().select();

            });




        });