CODEWITHSUNDEEP
javascriptjquerycsshtml-table
Naveen
Naveen

Reputation: 791

Make a table cell editable by placing input box over td

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

enter image description here

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.

Upvotes: 1

Views: 11471

Answers (4)

Soni
Soni

Reputation: 42

If you set contenteditable='true' in this way this will probably not work in IE. So I recommend 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)

Upvotes: 0

3pic
3pic

Reputation: 1219

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

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

This has a "editable" feature, https://editor.datatables.net/, working great, from where you can also update your MySQL DB : https://code.google.com/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.

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

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.com/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>

Upvotes: 3

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

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.net/kpkjr7ev/

Upvotes: 3

Related Questions