不到30行JS代码实现Excel表格的方法


Posted in Javascript onNovember 15, 2014

本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代。分享给大家供大家参考。具体分析如下:

某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性:

① 由不足30行的原生JavaScript代码实现
② 不依赖第三方库
③ Excel风格的语义分析 (公式以 "=" 开头)
④ 支持任意表达式 (=A1+B2*C3)
⑤ 防止循环引用
⑥ 基于localStorage的自动本地持久化存储

效果展示如下图所示:

不到30行JS代码实现Excel表格的方法

代码分析:

CSS略,HTML核心仅一行:

<table></table>

JavaScript代码如下:

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) {} });

})();

其实通过上文我们可以看出最核心的几步使用了EMEAScript5和HTML5的特性, 如:

querySelectorAll: 提供类似jQuery选择器的查询,由此可见,第三方JS库如jQuery并不是必不少的。

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

defineProperty 提供了类以Java的get,set访问/设置预处理方法,还有其他一些配置属性,如:是否可配置,可枚举等。

Object.defineProperty(o, "b", {get : function(){ return bValue; },

                               set : function(newValue){ bValue = newValue; },

                               enumerable : true,

                               configurable : true});

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
js中的this关键字详解
Sep 25 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
深入理解javascript变量声明
Nov 20 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
Vue中key的作用示例代码详解
Jun 10 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
详谈JavaScript内存泄漏
Nov 14 #Javascript
You might like
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php实现mysql封装类示例
2014/05/07 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
2019/04/03 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
面试常见的js算法题
2017/03/23 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
医学院毕业生自荐信
2013/11/08 职场文书
运动会跳远广播稿
2014/02/04 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
护士长竞聘书
2014/03/31 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
新闻稿标题
2015/07/18 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
Python中requests库的用法详解
2022/06/05 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android