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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JS实现4位随机验证码
Oct 19 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
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
微信小程序入门教程
2016/11/18 Javascript
js中作用域的实例解析
2017/03/16 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
2017/08/28 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python中的两个内置模块介绍
2015/04/05 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python的语言类型(详解)
2017/06/24 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
python批量修改文件名的示例
2020/09/27 Python
详解Scrapy Redis入门实战
2020/11/18 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
学校安全检查制度
2014/01/27 职场文书
秘书英文求职信范文
2014/01/31 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS