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代码

样式为：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。