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

 

 

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

 

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

 

 

 

TUTORIAL VIDEO

 

PART 1) THE 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”

// (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

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”

// (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

/* (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.

 

 

 

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

• Arrow Functions – CanIUse
• Content Editable – CanIUse

This example will work on all modern browsers.

 

LINKS & REFERENCES

• Sortable HTML Table – Code Boxx
• HTML Custom Data Attribute – MDN