今天头条入局小程序_JavaScript完成Excel表格效果

摘要: JavaScript完成Excel报表实际效果 本文关键为大伙儿详尽详细介绍了JavaScript完成Excel报表实际效果,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙...

JavaScript实现Excel表格效果       这篇文章主要为大家详细介绍了JavaScript实现Excel表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现Excel表格效果的具体代码,供大家参考,具体内容如下

一.主要实现:

1.List item
2.输入内容时显示边框
3.鼠标点击文本框以外部分失去焦点

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="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-colla凡科抠图e: colla凡科抠图e;
 .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" 
 caption 2016电脑配件价格清单 /caption 
 tr th 配件 /th th 第一季度 /th th 第二季度 /th th 第三季度 /th th 第四季度 /th /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 
 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 
 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 
 th memory /th 
 td input type="text" / /td 
 td input type="text" / /td 
 td input type="text" / /td 
 td input type="text" / /td 
 /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 

样式为:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:网页设计模板图片