How to Make HTML Table Cell Editable

How to Make Html Table Column editable?

You need to add event listener to your cells of table (td), the event should be double click event (dblclick), also note that, we have to create a activeCell variable to store, which cell is activated,

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
cell.addEventListener('dblclick', function() {
// to do
});
}

On event listener's to do code block, you need to make innerHTML of cell's an input or textarea with JavaScript,

for(let cell of cells) {
cell.addEventListener('dblclick', function() {
if(this.childElementCount == 0) {
let input = document.createElement('input');
input.setAttribute('type', 'textbox');
input.setAttribute('value', this.innerHTML);
this.innerHTML = "";
this.appendChild(input);
activeCell = this;
}
});
}

When user, clicks outside of the activated table cell, save the new value of cell's input and make it back a normal text, with mouseup event listener,

document.addEventListener('mouseup', function(e) {
if(activeCell != null) {
let container = activeCell.children[0];
if (!$(container).is(e.target) && $(container).has(e.target).length === 0)
{
activeCell.innerHTML = container.value;
activeCell = null;
}
}
});

I have used, some methods with JQuery, these are .is and .has for checking the clicked object is not activated cell.

Final code is, look like this,

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
cell.addEventListener('dblclick', function() {
if(this.childElementCount == 0) {
let input = document.createElement('input');
input.setAttribute('type', 'textbox');
input.setAttribute('value', this.innerHTML);
this.innerHTML = "";
this.appendChild(input);
activeCell = this;
}
});
}
document.addEventListener('mouseup', function(e) {
if(activeCell != null) {
let container = activeCell.children[0];
if (!$(container).is(e.target) && $(container).has(e.target).length === 0)
{
activeCell.innerHTML = container.value;
activeCell = null;
}
}
});

Have a good day :)

Editable table cell with the least side effect

Click dogs and edit away.

<table>
<td contenteditable style="border: 1px solid black; outline: 0px;">dogs</td>
</table>

How to make a HTML table cell into a editable text box

  1. First include the jQuery library
  2. Than put your script
  3. You might want to take a look at contenteditable Elements

which would than look pretty much like this:

$(function() {
var $td = $("td");
$td.on({ "keypress" : function(e) { if (e.which !== 13) { // On Return key - "save" cell e.preventDefault(); $(this).prop("contenteditable", false); } }, "dblclick" : function() { $td.not(this).prop("contenteditable", false); $(this).prop("contenteditable", true); } });
});
td, th { padding:5px; border: 1px solid #ddd; }td[contenteditable=true] { outline: 2px solid #0af; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><b>Double-click</b> on a table cell to edit</p>r
<table> <thead> <tr> <th>Code</th> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> <tr> <td>000</td> <td>Roko</td> <td>roko@example.com</td> <td>021-321-4321</td> </tr> <tr> <td>001</td> <td>Shahid</td> <td>shahid@example.com</td> <td>012-123-1234</td> </tr> </tbody></table>

How to make a partially un-editable table cell?

You could just use two span elements, make one of them contenteditable. Example: