Simple Editable HTML Table (A Quick Example)

Welcome to a tutorial on how to create an editable HTML table. Well, creating an editable table is quite literally adding a contentEditable property into the cell <td> on a double click. But it still requires quite some bits of code – Read on for an example!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

EDITABLE TABLE DEMO

Name Email
Job Doe job@doe.com
Joe Doe joe@doe.com
Joi Doe joi@doe.com
Jon Doe jon@doe.com
Joy Doe joy@doe.com
* Double-click on a cell to edit.
* Press enter or click outside cell to commit.
* Press escape to cancel.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

EDITABLE HTML TABLE

All right, let us now get into more details about how the editable HTML table works.

 

TUTORIAL VIDEO

 

PART 1) THE HTML

edit-table.html
<table class="editable">
  <!-- (A) HEADER -->
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
 
  <!-- (B) DATA -->
  <tbody>
    <tr>
      <td>Job Doe</td>
      <td>job@doe.com</td>
    </tr>
    <tr>
      <td>Joe Doe</td>
      <td>joe@doe.com</td>
    </tr>
    <tr>
      <td>Joi Doe</td>
      <td>joi@doe.com</td>
    </tr>
    <tr>
      <td>Jon Doe</td>
      <td>jon@doe.com</td>
    </tr>
    <tr>
      <td>Joy Doe</td>
      <td>joy@doe.com</td>
    </tr>
  </tbody>
</table>

Well, nothing special here. This is just a “normal HTML table” with an editable CSS class.

 

 

PART 2) THE JAVASCRIPT

2A) DOUBLE-CLICK TO “EDIT CELL”

edit-table.js
// (A) INITIALIZE - DOUBLE CLICK TO EDIT CELL
window.addEventListener("DOMContentLoaded", () => {
  for (let cell of document.querySelectorAll(".editable td")) {
    cell.ondblclick = () => editable.edit(cell);
  }
});

The magic of turning the “normal HTML table” into an “editable HTML table” lies in Javascript. The very first thing we need to do is to attach a double-click listener to all table cells <td>.

 

2B) “CONVERT” CELL TO EDITABLE FIELD

edit-table.js
var editable = {
  // (B) PROPERTIES
  selected : null, // current selected cell
  value : "", // current selected cell value
 
  // (C) "CONVERT" TO EDITABLE CELL
  edit : cell => {
    // (C1) REMOVE "DOUBLE CLICK TO EDIT"
    cell.ondblclick = "";
 
    // (C2) EDITABLE CONTENT
    cell.contentEditable = true;
    cell.focus();
 
    // (C3) "MARK" CURRENT SELECTED CELL
    cell.classList.add("edit");
    editable.selected = cell;
    editable.value = cell.innerHTML;
 
    // (C4) PRESS ENTER/ESC OR CLICK OUTSIDE TO END EDIT
    window.addEventListener("click", editable.close);
    cell.onkeydown = evt => {
      if (evt.key=="Enter" || evt.key=="Escape") {
        editable.close(evt.key=="Enter" ? true : false);
        return false;
      }
    };
  },
  // ...
};

This is a little long-winded, but keep calm and look closely. On double-clicking on a cell, all this essentially does is:

  • (C1) Remove “double click” to edit cell… Since it is already in “edit mode”.
  • (C2) Set contentEditable on the selected cell and focus on it.
  • (C3) Set the “currently editing cell” into editable.selected, and its current value into editable.value.
  • (C4) There are 2 ways to end the “edit mode”.
    • Click outside of editable.selected.
    • By pressing “enter” or “escape” within editable.selected.

 

 

2C) END “EDIT MODE”

edit-table.js
// (D) END "EDIT MODE"
close : evt => { if (evt.target != editable.selected) {
  // (D1) CANCEL - RESTORE PREVIOUS VALUE
  if (evt === false) {
    editable.selected.innerHTML = editable.value;
  }
 
  // (D2) REMOVE "EDITABLE"
  window.getSelection().removeAllRanges();
  editable.selected.contentEditable = false;

  // (D3) RESTORE CLICK LISTENERS
  window.removeEventListener("click", editable.close);
  let cell = editable.selected;
  cell.onkeydown = "";
  cell.ondblclick = () => editable.edit(cell);
 
  // (D4) "UNMARK" CURRENT SELECTED CELL
  editable.selected.classList.remove("edit");
  editable.selected = null;
  editable.value = "";
 
  // (D5) DO WHATEVER YOU NEED
  if (evt !== false) {
    console.log(cell.innerHTML);
    // check value?
    // send value to server?
    // update calculations in table?
  }
}}

Lastly, this will deal with ending the “edit mode” – When the user clicks outside of the cell, or by pressing ENTER/ESCAPE.

  • (D1) When the user hits escape to “cancel edit” – Restore to the cell’s previous value.
  • (D2) Remove the contentEditable property, and “restore” it to a normal <td>.
  • (D3) Remove “click to end edit mode” listeners, and reattach the “double click to edit cell”.
  • (D4) Clear the “currently editing cell”.
  • (D5) This is pretty much up to you to complete. Do whatever is required in your own project.

 

PART 3) THE CSS

edit-table.css
/* (A) ENTIRE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
 
/* (B) EDITABLE TABLE */
.editable {
  border-collapse: collapse;
}
.editable th, .editable td {
  text-align: left;
  padding: 15px;
}
.editable tbody tr:nth-child(even) {
  background: #f2f2f2;
}
.editable td.edit {
  background: #f8ff88;
}

Not important actually. Just some cosmetics to make things look better.

 

 

EXTRAS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

HOW TO TIE CELL VALUE TO AN ID?

  • Simply add a custom data attribute to the table cells <td data-id="123">.
  • Get the cell value and custom data in Javascript – if (evt !== false) { console.log(cell.innerHTML, cell.dataset.id); }

 

CLICK OUTSIDE CELL TO CANCEL

// (C4) PRESS ENTER/ESC OR CLICK OUTSIDE TO END EDIT
window.addEventListener("click", () => editable.close(false));

This may make more sense for mobile devices “without an escape key”. Well, you decide.

 

COMPATIBILITY CHECKS

This example will work on all modern browsers.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

16 thoughts on “Simple Editable HTML Table (A Quick Example)”

  1. This is so cool! Just a question. How can I save the content after i changed it? That will be perfect! Thanks!

    1. I will assume that you have “saved” the table content in a database in the first place. Just send the updated cell value to the server in D5 –

      let data = new FormData();
      data.append("KEY", cell.innerHTML);
      fetch("SERVER-SCRIPT", { method: "post", body: data })
      .then(res => res.text())
      .then(txt => { console.log(txt); /* SERVER RESPONSE */ });
    1. Sometimes, double click will accidentally select the text or cell. That simply unselects the selection.

  2. Hi!
    Thank you for sharing this really helpful script! Excellent work!
    I have a question about ending the editing. What do I have to change so that a click outside of the cell would restore the original value? Somehow I can’t figure that out.
    Thank you,
    Detlef

Leave a Comment

Your email address will not be published. Required fields are marked *