不到30行JS代码实现的Excel表格
不到30行JS代码实现的Excel表格,jQuery并非不可替代
某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性:
- 由不足30行的原生JavaScript代码实现
- 不依赖第三方库
- Excel风格的语义分析 (公式以 "=" 开头)
- 支持任意表达式 (=A1+B2*C3)
- 防止循环引用
- 基于localStorage的自动本地持久化存储
效果展示:
代码分析:
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});
原文 jsfiddle.net
不到30行JS代码实现的Excel表格相关推荐
- 登顶 GitHub 趋势榜,标星1.8k:200 行 JS 代码让画面人物瞬间消失!
整理 | 夕颜 出品 | CSDN(ID:CSDNnews) 今天,一个名为 Real-Time-Person-Removal(实时人物去除)项目在GitHub上火了,登上近日GitHub Trend ...
- 隐身术?登顶 GitHub Top1:200 行 JS 代码让画面人物瞬间消失!
整理 | 夕颜 出品 | CSDN(ID:CSDNnews) 今天,一个名为 Real-Time-Person-Removal(实时人物去除)项目在GitHub上火了,登上近日GitHub Trend ...
- java实现语法分析器_200 行 JS 代码,带你实现代码编译器
一.前言 对于前端同学来说,编译器可能适合神奇的魔盒 ,表面普通,但常常给我们惊喜. 编译器,顾名思义,用来编译,编译什么呢?当然是编译代码咯 . 其实我们也经常接触到编译器的使用场景: React ...
- php公告滚动源码,10行js代码实现上下滚动公告效果方法
本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧.希望能帮助到大家 ...
- 30行python代码设计_30行Python代码实现3D数据可视化
原标题:30行Python代码实现3D数据可视化 作者:潮汐 来源:Python技术 欢迎来到 编程教室~ 我们之前的文章中有讲解过不少 Matplotlib 的用法,比如: 之前我们基本都是用它来绘 ...
- 王者荣耀——bat批处理文件,自动刷金币版(脱胎于30行Python代码刷金币版),Windows双击即可运行!
参考<30行Python代码刷王者荣耀金币>:https://segmentfault.com/a/1190000012520431 1.源代码 以下是源代码部分,全部复制到文本文档, 用 ...
- 如何用python破解热点_用30行Python代码制作wifi万能钥匙,邻居家wifi网速好快
原标题:用30行Python代码制作wifi万能钥匙,邻居家wifi网速好快 当我们拖着疲惫的身体下班回到家,想开开心心的吹着空调风扇吃着西瓜,然后手机连上wifi打一把游戏好好舒服下,然而家里wif ...
- 通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
本人公众号上线啦!!! 公众号与博客名一样:没有腹肌的程序猿 公众号文章类型:工作上所遇到的需求实现方案分享. 此外也会提供一些数据集供大家使用.(这个还在规划中,毕竟打工人时间挺紧的,哈哈哈哈) 到 ...
- html excel 在线编辑,利用js实现在线编辑excel表格代码
特效描述:利用js实现 在线编辑 excel 表格代码.利用js实现在线编辑excel表格代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 function load(){ x ...
- 导入excel表格到数据库、导入excel表格到数据库代码、根据excel表格路径将数据导入到数据库、验证要导入的excel表格数据、根据路径获取MultipartFile、FileItem文件
导入excel表格到数据库.根据路径导入excel表格到数据库代码.根据excel表格路径将数据导入到数据库.验证要导入的excel表格数据.根据路径获取MultipartFile.FileItem文 ...
最新文章
- python pillow库_python pillow模块用法
- 安装了超图、oracle、eclipse、JDK后系统的java进程情况以及java.exe、javaw.exe
- 解决ora-280000 the account is locked
- delphi7存取配置文件与sqlserver数据库连接_Delphi7存取配置文件与SQLServer数据库连接...
- 世上最“贵”的河:河里石头比黄金还值钱?甚至还有士兵驻守!
- c语言汇编混编,c语言与汇编混编写法
- 卢伟冰曝Redmi K30 Pro搭载骁龙865,却惨遭交罚款
- 在sqlserver中创建表值函数
- mysql事务控制(xa分布式事务)和锁定语句_MySQL的SQL语句 -事务性语句和锁定语句(7)- XA 事务...
- HZOJ visit
- 查看mysql 主从日志_MySQL 主从
- 数学建模(5.5)相关系数_斯皮尔曼相关系数
- 18年6月英语六级第一套听力单词
- ndims matlab,MATLAB的size(),length(),ndims()函数
- hive创建hbase外部表
- PHP 微信支付v3签名生成
- TASKCTL5.0线上支付购买授权
- 【SVM回归预测】布谷鸟算法优化SVM回归预测【含Matlab源码 1422期】
- linux kaiser补丁下载,kaiser凯撒
- idea格式化代码快捷键 快捷键: Ctrl+Shift+Alt+L