How to implement an Excel table in less than 30 lines of JS code_javascript skills

The example in this article describes how to implement an Excel table with less than 30 lines of JS code. It can be seen that jQuery is not irreplaceable. Share it with everyone for your reference. The specific analysis is as follows:

A foreign programmer demonstrated an Excel spreadsheet application written in native JS that does not rely on third-party libraries. It has the following features:

① Implemented by less than 30 lines of native JavaScript code
② Does not rely on third-party libraries
③ Excel-style semantic analysis (formulas starting with "=")
④ Supports any expression (=A1 B2*C3)
⑤ Prevent circular references
⑥ Automatic local persistent storage based on localStorage

The effect is shown below:

Code analysis:

CSS omitted, only one line of HTML core:

Copy code The code is as follows:

The JavaScript code is as follows:

Copy code The code is as follows:

for (var i=0; i var row = document.querySelector("table").insertRow(-1);
for (var j=0; j       var letter = String.fromCharCode("A".charCodeAt(0) j-1);
            row.insertCell(-1).innerHTML = i&&j ? "" : i||letter;
}
}
var DATA={}, INPUTS=[].slice.call(document.querySelectorAll("input"));
INPUTS.forEach(function(elm) {
​ elm.onfocus = function(e) {
         e.target.value = localStorage[e.target.id] || "";
};
elm.onblur = function(e) {
LocalStorage[e.target.id] = e.target.value;
         computeAll();
};
var getter = function() {
         var value = localStorage[elm.id] || "";
If (value.charAt(0) == "=") {
With (DATA) return eval(value.substring(1));
              } else { return isNaN(parseFloat(value)) ? value : parseFloat(value); }
};
Object.defineProperty(DATA, elm.id, {get:getter});
Object.defineProperty(DATA, elm.id.toLowerCase(), {get:getter});
});
(window.computeAll = function() {
INPUTS.forEach(function(elm) { try { elm.value = DATA[elm.id]; } catch(e) {} });
})();

In fact, from the above we can see that the core steps use the features of EMEAScript5 and HTML5, such as:

querySelectorAll: Provides queries similar to jQuery selector. It can be seen that third-party JS libraries such as jQuery are not essential.

Copy code The code is as follows:

var matches = document.querySelectorAll("div.note, div.alert ");

defineProperty provides classes with Java get and set access/setting preprocessing methods, as well as other configuration properties, such as: whether it is configurable, enumerable, etc.

Copy code The code is as follows:

Object.defineProperty(o, "b", {get : function(){ return bValue; },
set: function(newValue){ bValue = newValue; },
enumerable : true,
Configurable : true});

I hope this article will be helpful to everyone’s JavaScript programming design.