Jquery - Redeem the value of a 'td' and insert into a Text

Question

Good night ,

Next galley, I have a table from which I use the data from mysql , wanted to take the value of td ,and insert inside a TEXT that will appear inside the TD of the table with the value that was there so that it can be edited and updated in the database, I am trying to use Jquery to accomplish such feat but without success.

I tried something like this:

$(function(){
   $('#ID_DA_TD').click(function(){
      var teste = $('#ID_DA_TD').text();
      $('#ID_DA_TD').html('<input type="text" class="form-control form-control-sm" id="upgrade" style="width:150px;">');
      $('#upgrade').val(teste);
   });
});

Excuse my ignorance but I’m beginner, vlw.

Answer 1

You don’t have to take it by the hair id (otherwise you will have to create several events for each id). Just click on the td. It is also necessary to create ids dynamics for the new inputs, otherwise there will be several inputs with the same id, what is wrong. You can create ids different using the index of td.

Also use the method .trim() to clear text ends.

Edit

Includes an auxiliary button to return the original state of the td:

$(function(){
   $('table td:not("input")').click(function(e){
      if($(this).find("input").length == 0){
         var idx = $('table td').index(this);
         $(this)
         .html('<input data-original="'+$(this).text().trim()+'" value="'+$(this).text().trim()+'" type="text" class="form-control form-control-sm" id="upgrade'+idx+'" style="width:150px;"><button>X</button>')
         .find('input').focus();
      }else if(e.target.tagName == "BUTTON"){
         $(this).html($(this).find("input").data("original"));
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr>
      <td id="td1">
         texto 1
      </td>
      <td id="td2">
         texto 2
      </td>
   </tr>
</table>