I want to make a table cell editable on double click so that I can put some value in cell :

Currently I am placing a input box inside td on dblclick on it :

$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();

$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.

I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.

I want to make a table cell editable on double click so that I can put some value in cell :

Currently I am placing a input box inside td on dblclick on it :

$('<input type="text" />').val(oldCellval).appendTo($this).end().focus().select();

$this is my td element in which I want to show input box on double click, On blur I am removing input box and setting new value back.

I would like to show input box over td element instead of inside it so that it will appear input is inside td element, because I am using a table library which only allows text inside td elements, on adding html element(input) inside td its not working properly. Any help is much appreciated.

• javascript
• jquery
• css
• html-table

• What is the benefit of overlapping if you have to update content after edit either way? Would not it be simpler just to replace td with input and after edit replace input with new value ? $(selector).html('html to replace'), will library plain if you recreate original td ? – Michał W. Commented Jul 30, 2015 at 8:07
• replacing html content of td element is creating problem. – Naveen Commented Jul 30, 2015 at 8:36

4 Answers 4

For similar result you can use contenteditable

<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>

Fiddle:https://jsfiddle/kpkjr7ev/

You can do something like this,using contenteditable attribute that you can avoid input tag

$('td').on({
  'dblclick': function() {
    $(this).prop('contenteditable', true);
  },
  'blur': function() {
    $(this).prop('contenteditable', false);
  }
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border=1>
  <thead>
    <tr>Heading 1</tr>
    <tr>Heading 2</tr>
  </thead>
  <tbody>
    <tr>
      <td>ddd</td>
      <td>ddd</td>
    </tr>
    <tr>
      <td>ddd</td>
      <td>ddd</td>
    </tr>
  </tbody>
</table>

https://code.google./p/jquery-datatables-editable/

I think you should use this great plugin called JQuery Datatables https://www.datatables/

This has a "editable" feature, https://editor.datatables/, working great, from where you can also update your MySQL DB : https://code.google./p/jquery-datatables-editable/

You need to dive in and spend some time to master it. Once done it is a great tool for lots of table projects.

If you set contenteditable='true' in this way this will probably not work in IE. So I remend you to add a div in td in this way

and in Js on double click of cell make the cell editable

 $(this).find('#editdiv').prop('contenteditable', true)