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与iframe交互实现代码
Dec 24 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
JS中Location使用详解
May 12 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
js 计算图片内点个数的示例代码
Apr 04 Javascript
JS数组的常用10种方法详解
May 08 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写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
数据库面试要点基本概念
2013/10/31 面试题
海量信息软件测试笔试题
2015/08/08 面试题
给水工程专业毕业生自荐信
2014/01/28 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
班组拓展活动方案
2014/08/14 职场文书
如何写早恋检讨书
2014/09/10 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
先进个人评语大全
2015/01/04 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书