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 attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
node中间层实现文件上传功能
2018/06/11 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
让 python 命令行也可以自动补全
2014/11/30 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
详解爬虫被封的问题
2019/04/23 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
小学德育工作经验交流材料
2014/05/22 职场文书
就业协议书
2014/09/12 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python