The final result is shown as follows:

Functional description

Double – click the table row to edit the table, click the blank to save.

Table can be edited in related articlesEditable table

Implementation approach

When the table is in the edit state, click on the page to determine whether the click area is the edit area, if not the edit area to implement the save function and cancel the click listener

Function point 1: Listening and canceling the answer on the page

/ / by addEventListener and removeEventListener document. The addEventListener ("click".function.false);
document.removeEventListener("click".function.false);
Copy the code

Function point 2: Determine whether the click area is editable

This function point is somewhat difficult, first you need to determine whether the clicking area is a table area, second you need to determine whether the clicking area is an edit state of the row. So I did it in two steps

1. Determine whether the click area is a table area

This function point is implemented through the CONTAINS interface. Contains (target); This interface can determine whether target is a child node of tableDom.

/ / first introduced to click through the addEventListener dom area document. The addEventListener ("click",
    e => {
      this.judgeClickDom(e);
    },
    false); // judgeClickDom(e) {const {target} = e; // judgeClickDom(e) {const {target} = e;let tableDom = document.getElementsByClassName("table"); // getElementsByClassName gets an array, it must have an index or it will get an errorif (!tableDom[0].contains(target)) {
    this.saveTableData();
  }
},
Copy the code

2. Check whether the click area is in the edited state

This feature uses the Element framework. How to mark the edit status line is described in the editable table

Cancel to monitor

Because we are listening for click using the arrow function without a function name or function expression, we have problems when we unlisten. My solution is to bind it to a global variable, bindClick. The following code

/ / to start listening to the document. The addEventListener ("click", (this.bindClick = e => { ... })); / / cancel listening document. RemoveEventListener ("click", this.bindClick);
Copy the code

This article refer to the https://www.cnblogs.com/sefaultment/p/11749802.html