title: Make a table cell editable by placing input box over td
body: <p>I want to make a table cell editable on double click so that I can put some value in cell : </p>
  
  <p><a href="https://i.stack.imgur.com/1r1sq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1r1sq.png" alt="enter image description here"></a></p>
  
  <p>Currently I am placing a input box inside td on dblclick on it : </p>
  
  <pre><code>$('&lt;input type="text" /&gt;').val(oldCellval).appendTo($this).end().focus().select();
  </code></pre>
  
  <p><code>$this</code> is my <code>td</code> element in which I want to show input box on double click, <code>On blur</code> I am removing input box and setting new value back.</p>
  
  <p>I would like to show <code>input</code> box <strong>over</strong> td element instead of <strong>inside</strong> it so that it will appear input is inside <code>td</code> element, because I am using a table library which only allows text inside <code>td</code> elements, on adding html element(<code>input</code>) inside td its not working properly. Any help is much appreciated. </p>