Less than 30 lines JS code to implement Excel table method _javascript Tips

The example in this article is about less than 30 lines of JS code to implement the Excel table method, visible jquery is not irreplaceable. Share to everyone for your reference. The specific analysis is as follows:

A foreign programmer shows an Excel table application written by native JS that is not dependent on a third-party library, and has the following characteristics:

① is implemented by native JavaScript code less than 30 lines
② not dependent on third party libraries
Semantic analysis of ③excel style (the formula begins with "=")
④ supports arbitrary expressions (=A1+B2*C3)
⑤ Prevent circular references
⑥ automatic local persistent storage based on Localstorage

The effect is shown in the following illustration:

Code Analysis:

CSS slightly, only one line of HTML core:

Copy Code code as follows:

<table></table>

The JavaScript code is as follows:

Copy Code code as follows:

for (var i=0; i<6; i++) {
var row = document.queryselector ("table"). InsertRow (-1);
for (Var j=0 j<6; 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, through the above we can see that the core of the steps using the EMEASCRIPT5 and HTML5 features, such as:

Queryselectorall: Provides a query similar to the jquery selector, this shows that the third party JS library such as jquery is not necessarily a lot.

Copy Code code as follows:

var matches = Document.queryselectorall ("Div.note, Div.alert");

DefineProperty provides classes with Java Get,set Access/settings preprocessing methods, as well as other configuration properties such as whether configurable, enumerable, and so on.

Copy Code code as follows:

Object.defineproperty (O, "B", {get:function () {return bvalue;},
Set:function (newvalue) {bvalue = newvalue;},
Enumerable:true,
Configurable:true});

I hope this article will help you with your JavaScript programming.