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 double click. But it still requires quite some bits of code – Read on for an example!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Demo Editable Table Useful Bits & Links
The End

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, 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.

 

 

EDITABLE HTML TABLE

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

 

PART 1) THE HTML

edit-table.html
<table id="demo" 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”.

 

 

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("#demo td")) {
    cell.ondblclick = () => { editable.edit(cell); };
  }
});

The magic to 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
// (B) "CONVERT" TO EDITABLE CELL
edit : (cell) => {
  // (B1) REMOVE "DOUBLE CLICK TO EDIT"
  cell.ondblclick = "";
 
  // (B2) EDITABLE CONTENT
  cell.contentEditable = true;
  cell.focus();
 
  // (B3) "MARK" CURRENT SELECTED CELL
  cell.classList.add("edit");
  editable.selected = cell;
 
  // (B4) PRESS ENTER OR CLICK OUTSIDE TO END EDIT
  window.addEventListener("click", editable.close);
  cell.onkeydown = (evt) => { if (evt.key=="Enter") {
    editable.close(true);
    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:

  • (B1) Remove “double click” to edit cell… Since it is already in “edit mode”.
  • (B2) Set contentEditable on the selected cell and focus on it.
  • (B3) Set the “currently edited cell” into editable.selected.
  • (B4) There are 2 ways to end the “edit mode”.
    • Click outside of editable.selected.
    • By pressing “enter” within editable.selected.

 

 

2C) END “EDIT MODE”

edit-table.js
// (C) END "EDIT MODE"
selected : null, // current selected cell
close : (evt) => { if (evt.target != editable.selected) {
  // (C1) DO WHATEVER YOU NEED
  // check value?
  // send value to server?
  // update calculations in table?
 
  // (C2) REMOVE "EDITABLE"
  window.getSelection().removeAllRanges();
  editable.selected.contentEditable = false;

  // (C3) RESTORE CLICK LISTENERS
  window.removeEventListener("click", editable.close);
  let cell = editable.selected;
  cell.ondblclick = () => { editable.edit(cell); };
 
  // (C4) "UNMARK" CURRENT SELECTED CELL
  editable.selected.classList.remove("edit");
  editable.selected = null;
}}

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

  • (C1) This is pretty much up to you to complete. Do whatever is required in your own project.
  • (C2) Remove the contentEditable property, and “restore” it to a normal <td>.
  • (C3) Remove “click to end edit mode” listeners, and reattach the “double click to edit cell”.
  • (C4) Clear the “currently edited cell”.

 

PART 3) THE CSS

edit-table.css
/* (A) ENTIRE PAGE */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
 
/* (B) EDITABLE TABLE */
.editable {
  border-collapse: collapse;
}
.editable th, .editable td {
  border: 1px solid #000;
  padding: 10px;
}
.editable th {
  color: #fff;
  background: #000;
}
.editable td.edit {
  background: #ffe7e7;
}

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

 

 

USEFUL BITS & LINKS

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

 

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!

Leave a Comment

Your email address will not be published.