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 相关文章推荐
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js替代copy(示例代码)
Nov 27 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
使用php来实现网络服务
2009/09/15 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
Javascript里使用Dom操作Xml
2006/09/20 Javascript
javascript编程起步(第四课)
2007/02/27 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python+django实现文件下载
2016/01/17 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python实现贪吃蛇游戏
2020/03/21 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
python asyncio 协程库的使用
2021/01/21 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
医学求职信
2014/05/28 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL