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的面向对象(二)
Nov 09 Javascript
Javascript调用C#代码
Jan 17 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
页面点击小红心js实现代码
May 26 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
vue+element实现动态加载表单
Dec 13 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
咖啡常见的种类
2021/03/03 新手入门
smarty内置函数capture用法分析
2015/01/22 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
一道python走迷宫算法题
2018/01/22 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
女儿十岁生日答谢词
2014/01/27 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
2014年会策划方案
2014/05/11 职场文书
一份文言文检讨书
2014/09/13 职场文书
红高粱观后感
2015/06/10 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸