JavaScript如何实现Excel表格效果

这篇文章主要介绍了JavaScript如何实现Excel表格效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、重庆小程序开发公司、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了临湘免费建站欢迎大家使用！

具体内容如下

一.主要实现：

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

 
 
 
   *{
   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;
 }
    


 
  2016电脑配件价格清单
  配件第一季度第二季度第三季度第四季度
  
  CPU
  
  
  
  
  
  
  hard disc
  
  
  
  
  
  
  main bord
  
  
  
  
  
  
  memory
  
  
  
  
  
  
  mouse
  
  
  
  
    
 

这里是一个样式表和文本，用来生成表格，下面是js代码

样式为：

感谢你能够认真阅读完这篇文章，希望小编分享的“JavaScript如何实现Excel表格效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!