Javascript double click text transform into textbox

What is the javascipt code that will edit a text on double click. The process is I have a text and if I double click it, a text box will appear, and if I press enter the word will change depends on what you've type.

Sample

This is sample text. $nbsp;$nbsp; --> if I double click it a textbox will appear.

<input type="tex开发者_开发技巧t" value="This is sample text." name="" />

Sorry for asking this. I am a newbie in javascript

Here is a great example.

I'm going to paste in the script from that example so that it's preserved in case that link goes away, but you should follow the link -- the article does a great job of breaking the script down line by line and explaining what it does. A great learning opportunity for javascript.

var editing  = false;

if (document.getElementById && document.createElement) {
    var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

function catchIt(e) {
    if (editing) return;
    if (!document.getElementById || !document.createElement) return;
    if (!e) var obj = window.event.srcElement;
    else var obj = e.target;
    while (obj.nodeType != 1) {
        obj = obj.parentNode;
    }
    if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
    while (obj.nodeName != 'P' && obj.nodeName != 'HTML') {
        obj = obj.parentNode;
    }
    if (obj.nodeName == 'HTML') return;
    var x = obj.innerHTML;
    var y = document.createElement('TEXTAREA');
    var z = obj.parentNode;
    z.insertBefore(y,obj);
    z.insertBefore(butt,obj);
    z.removeChild(obj);
    y.value = x;
    y.focus();
    editing = true;
}

function saveEdit() {
    var area = document.getElementsByTagName('TEXTAREA')[0];
    var y = document.createElement('P');
    var z = area.parentNode;
    y.innerHTML = area.value;
    z.insertBefore(y,area);
    z.removeChild(area);
    z.removeChild(document.getElementsByTagName('button')[0]);
    editing = false;
}

document.onclick = catchIt;

I wanted to know how it works as I have seen it on many websites. And I build it using jQuery

$(document).dblclick(function(event) {
  var id = event.target.id; //id
  // var id = $(this).attr('id');
  if (id == "") {
    console.log("nope");
  } else {
    id = "#" + id + "";
    console.log(typeof(id)); //concatenated with #
    text = $(id).text().trim();
    console.log(text); //asscociated text
    $(id).html('<textarea name="" id="tex" cols="10" rows="1" onkeypress="myFunction(event)">' + text + '</textarea>');
    // alert(id);
  }
})

function myFunction(event) {
  var x = event.code;
  var id = $(this).attr('id');
  parentId = event.path[1].id;
  parentId = "#" + parentId + "";
  if (x == 'Enter') {
    name = $('#tex').val();
    $(parentId).text(name);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-3">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="name1" class="name">
          john
        </td>
        <td id="sirname1">Doe</td>
        <td id="email1">john@example.chdm som</td>
      </tr>
      <tr>
        <td id="name2" class="name">Mary</td>
        <td id="sirname2">Moe</td>
        <td id="email2">mary@example.com</td>
      </tr>
      <tr>
        <td id="name3" class="name">July</td>
        <td id="sirname3">Dooley</td>
        <td id="email3">july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>