How to make HTML table cell editable?

Ready, set, edit on double-click

Kick-start cell editing with a double-click event:

document.querySelectorAll('td').forEach(td => {
  td.ondblclick = function() {
    this.contentEditable = true; // "Touchdown! Edit mode, ACTIVATE!" 🏉
  };
});


Event handling and change saving

Remember: Changes don't save themselves. Listen for the blur event, it signals when the cell loses focus (Read: User done editing):

td.onblur = function() {
  this.contentEditable = false; // "Hey AJAX, haul this data back to the server!" 🚛
};


Keeping data in check with validation

Safeguard your app from invalid data like a pro:

td.onblur = function() {
  if (isValid(this.innerText)) { 
    this.contentEditable = false; // Green light for saving 👍
  } else {
    alert('Invalid input!'); // Red flag 🚩
    this.focus(); // Send user back to correct it
  }
};


Define isValid to match your data validation criteria.

Getting fancy with dynamic input

Level up by swapping static text for an <input> field:

td.ondblclick = function() {
  let input = document.createElement('input');
  input.value = this.innerText; // "Hello, fresh shiny input field!" ✨
  this.innerHTML = '';
  this.appendChild(input);
  input.focus();
};


Ensure the <input> alignment with the cell, remove it post-editing:

input.onblur = function() {
  td.innerHTML = this.value; // The swap is complete. Phase out the input!
};


Keyboard is the key

To streamline editing, involve the keyboard:

input.onkeydown = function(e) {
  if (e.key === 'Enter') { // "Phew, done editing." 🎯
    // Trigger save and exit edit mode
  } else if (e.key === 'Escape') { // "Aah! Undo! Undo!" 🆘
    // Revert changes and scram
  
  }
};


Secure your data transmission

Securing your data transmission isn't just good practice, it's business logic:

• Authenticate with CSRF tokens or API keys.
• Use HTTPS, because your data is precious.
• Apply server-side sanitization and validation to block XSS attacks.

Checking browser compatibility

contenteditable is a star of HTML5. Ensure your audience (read: user's browser) can see the show.

Minimizing unnecessary server calls

Don't pester your server with constant updates, integrate a delay mechanism for tempering data save requests.

Keep it simple smarty

Your mantra: Simplicity over complexity

• Prefer vanilla JavaScript to bloated libraries.
• Use CSS for visual indicators of edit mode.
• Automate text selection on entering edit mode.