JavaScript实现Excel表格效果


Posted in Javascript onFebruary 07, 2020

本文实例为大家分享了JavaScript实现Excel表格效果的具体代码,供大家参考,具体内容如下

一.主要实现:

1.List item
2.输入内容时显示边框
3.鼠标点击文本框以外部分失去焦点

<!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/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>仿Excell表格</title>
 <style type="text/css">
   *{
   margin: 0;
   padding: 0;
   }
 .plist{
 width: 800px;
 margin: 100px auto;
 border: 1px solid #aaa;
 border-collapse: collapse;
 }
 .plist caption{
 font: 700 20px/28px "微软雅黑";
 padding: 10px;
 }
 .plist th,.plist td{
 width: 120px;
 line-height: 20px;
 font-size: 14px;
 font-family: "微软雅黑";
 border: 1px solid #aaa;
 text-align: center;
 padding: 4px;
 }
 .plist td{
 padding: 0;

 }
 .plist tr.headline{
 background-color: #379;
 }
 .plist td input{
 height: 24px;
 text-align: left;
 border: none;
 outline-style: none;
 font-size: 14px;
 border: 2px solid #fff;
 }
 .plist .alt{ /*设置鼠标点击时出现的框*/
 border: 2px solid #222;
 }
  </style>  
</head>
<body>
 <table id="price" class="plist">
  <caption>2016电脑配件价格清单</caption>
  <tr class="headline"><th>配件</th><th>第一季度</th><th>第二季度</th><th>第三季度</th><th>第四季度</th></tr>
  <tr>
  <th>CPU</th>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  </tr>
  <tr>
  <th>hard disc</th>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  </tr>
  <tr>
  <th>main bord</th>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  </tr>
  <tr>
  <th>memory</th>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  </tr>
  <tr>
  <th>mouse</th>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  <td><input type="text" /></td>
  </tr>  
 </table>
</body>
</html>

这里是一个样式表和文本,用来生成表格,下面是js代码

<script>
  window.onload = function (){
   var Tab = document.getElementById('price');
   var Inputs = Tab.getElementsByTagName('input');
   for(var i=0; i<Inputs.length;i++){
    Inputs[i].onfocus = function (){
     this.className = 'alt';
    }
    Inputs[i].onblur = function (){
     this.className = '';
    }
   }

  }
</script>

样式为:

JavaScript实现Excel表格效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
js实现自动播放匀速轮播图
Feb 06 #Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 #Javascript
vue 检测用户上传图片宽高的方法
Feb 06 #Javascript
vue中对象数组去重的实现
Feb 06 #Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 #Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 #Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 #Javascript
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
c++工程师面试问题
2013/08/04 面试题
英文留学推荐信范文
2014/01/25 职场文书
环保建议书
2014/03/12 职场文书
伦敦奥运会口号
2014/06/13 职场文书
保管员岗位职责
2015/02/14 职场文书
公司文体活动总结
2015/05/07 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
小学语文教学随笔
2015/08/14 职场文书