不到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});

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

赞 (0)

相关推荐

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

  • JS实现表格数据各种搜索功能的方法

    本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <script type="text/javascript">    window.onl

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • js生成动态表格并为每个单元格添加单击事件的方法

    html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu

  • 通过js脚本复制网页上的一个表格的不错实现方法

    今天有人问我一个问题:如何通过js脚本复制网页上的一个表格?看起来似乎比较有难度,不过还是搞定了,顺便把解决这个问题的过程记录下来,希望能对写脚本的兄弟们有所帮助. 以前没有写过这种脚本,不过想起来前不久刚看到一个脚本可以实现全选HTML编辑器的内容,于是想到一个方案:使用脚本将该表格插入HTML编辑器中,然后全选HTML编辑器内容,执行HTML编辑器的复制命令,即可实现复制表格功能,很快搞定: 测试 测试表格 测试表格 测试表格 测试表格 文字 "); // 初始化编辑器 editor.doc

  • 解析js原生方法创建表格效率测试

    我们先看一下三种算法以及在各种浏览器下的表现.第一种: 直接操作dom. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>     

  • JS控制表格实现一条光线流动分割行的方法

    本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit

  • JS实现网页表格自动变大缩小的方法

    本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

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

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

    本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代.分享给大家供大家参考.具体分析如下: 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储 效果展示如下图所示: 代码分析:

  • 20行JS代码实现网页刮刮乐效果

    20行JS代码实现网页刮刮乐效果

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 <style type=&

  • 一百行JS代码实现一个校验工具

    做过校验需求的小伙伴们都知道,校验其实是个麻烦事. 规则多,需要校验的字段多,都给我们前端带来巨大的工作量. 一个不小心,代码里就出现了不少if else等不可维护的代码. 因此,我觉得一个团队或者是一个项目,需要一个校验工具,简化我们的工作. 首先,参考一下 Joi.只看这一小段代码: Joi.string().alphanum().min(3).max(30).required() 我希望我的校验工具Coi也是链式调用,链式调用可以极大的简化代码. 校验呢,其实主要就3个入参:需要校验的数据

  • 统计有多少行JS代码和ASP代码

    计算当前文件夹中,有多少行JS代码和ASP代码,并且还可统计代码有多少字节有示例代码 复制代码 代码如下: <% '\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ '\\ '\\    来自 codeproject.com '\\    计算js和asp代码 '\\    修改 bluedestiny '\\    mail:bluedestiny at 126.com '\\ '\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

  • 20行JS代码实现粘贴板复制功能

    使用剪贴板是一项基本技能.作为码农都应知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分别是自动聚焦.复制.粘贴的快捷键. 而对普通用户可能就不太容易了.即使用户知道剪贴板是什么,(除了)那些眼神极好或反应很快的人,其他情况下很难以突出显示他们想要的确切文字.若用户不知道键盘快捷键,也看不到隐藏的编辑菜单,或从未使用右键菜单或不知道长按触屏弹出选项菜单,那么他很可能无法察觉到复制功能. 那么我们是否应该提供一个"复制到剪贴板&q

  • 30行Python代码实现高分辨率图像导航的方法

    在项目开发的过程中,经常会遇到要查看图像细节的问题,这时候我们通常会,滚动滑轮将图像放大,或者使用电脑内置的放大器功能进行查看,如下图所示,是我使用Altium Designer软件的高清晰图像导航功能查看PCB细节的效果: 那么作为一位程序员,是否可以做到这点呢? 当然可以,Python在手,天下我有~ 1.导入图像功能 导入图像功能是基于Windows命令窗口实现的,用户在命令窗口调用Python文件即可导入图像信息,输入指令及效果如下所示: 实现代码如下所示: if len(sys.arg

  • 微信小程序12行js代码自己写个滑块功能(推荐)

    效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &

  • 30行Python代码打造一款简单的人工语音对话

    30行Python代码打造一款简单的人工语音对话

    @Author:Runsen 1876年,亚历山大·格雷厄姆·贝尔(Alexander Graham Bell)发明了一种电报机,可以通过电线传输音频.托马斯·爱迪生(Thomas Edison)于1877年发明了留声机,这是第一台记录声音并播放声音的机器. 最早的语音识别软件之一是由Bells Labs在1952年编写的,只能识别数字.1985年,IBM发布了使用"隐马尔可夫模型"的软件,该软件可识别1000多个单词. 几年前,一个replace("?",&quo

  • vue.js中导出Excel表格的案例分析

    有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为: 1.安装依赖 npm install -S file-saver xlsx npm install -D script-loader 2.导入两个JS 下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel.js两个JS文件 3.在main.js引入这两个JS文件 ** import Blob from '

  • JS代码防止SQL注入的方法(超简单)

    下面通过两个方面给大家介绍js代码防止sql注入的方法,非常简单实用,感兴趣的朋友参考下吧! 1.URL地址防注入: //过滤URL非法SQL字符 var sUrl=location.search.toLowerCase(); var sQuery=sUrl.substring(sUrl.indexOf("=")+1); re=/select|update|delete|truncate|join|union|exec|insert|drop|count|'|"|;|>

随机推荐