JavaScript实现Excel表格效果

本文实例为大家分享了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>

样式为:

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

(0)

相关推荐

  • 不到30行JS代码实现Excel表格的方法

    本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代.分享给大家供大家参考.具体分析如下: 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储 效果展示如下图所示: 代码分析:

  • JS调用页面表格导出excel示例代码

    使用JS方法调用页面表格导出excel有很大的限制: 1.目前试了几个浏览器,只有IE支持, 2.点击 工具---安全---自定义级别---ActiveX 相关选项启用 下面是html代码 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()

  • JavaScript将页面表格导出为Excel的具体实现

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>导出Excel</TITLE> <script type="text/javascript"> var idTmr = ""; function killExcelProcess(appE

  • javascript将json格式数组下载为excel表格的方法

    实例如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery183.min.js"></script> <script type="text/javasc

  • Nodejs获取网络数据并生成Excel表格

    Nodejs的模版中有很多关于Excel表格的,这里我简单介绍一下我使用过的一个模块的使用. 首先,先安装Excel的模块: npm install node-xlsx 然后,在代码中引入模块: var xlsx = require('node-xlsx'); 最后,获取数据并写入Excel: var fs = require('fs'); var xlsx = require('node-xlsx'); var ajax = require('./ajax.js'); start(); fun

  • Java实现excel表格转成json的方法

    今天有个朋友问我,有没有excel表格到处json的方法,在网上找到了好几个工具,都不太理想,于是根据自己的需求,自己写了一个工具. 功能代码 package org.duang.test; import java.io.File; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import net.sf.json.JSONArray; impo

  • Vue导出json数据到Excel电子表格的示例

    网上看了很多文档感觉都不全,这里写一篇完整的详细教程. 一.安装依赖(前面基本一样) npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev 二.下载两个所需要的js文件Blob.js和 Export2Excel.js. 这里贴下下载地址: Export2Exce_jb51.rar 三.src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js

  • js导出Excel表格超出26位英文字符的解决方法ES6

    这个需要对Excel表格的表头编码规则有所了解,目前示例代码只扩展到52个字段 /** *json数据导入导出Excel表格示例代码 * / var array_utils = require('./utils-array') var XLSX = require("xlsx"); module.exports = { writeExcel : function (headers,data,file,callback) { if(data.length ==0){ var obj =

  • JavaScript实现Excel表格效果

    本文实例为大家分享了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"> <htm

  • JavaScript实现动态表格效果

    本文实例为大家分享了JavaScript实现动态表格效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> .bigDiv{ width: 600px; margin: 50px auto; } table{

  • JavaScript获取Excel表格的列序号和列名

    目录 1.常量和进制转换方法 2.获取列名 3.获取列序号 4.使用 前言: 在处理Excel文件时,通常要获取xx列的数据,这就要求先找到列序号(从0开始). 下面将介绍从列名获取列序号和从列序号或获取列名的方法,当中将涉及到10进制和k进制的互转. 1.常量和进制转换方法 //列名元素集 const COL_ABC = ["A", "B", "C", "D", "E", "F", &

  • JavaScript实现的斑马线表格效果【隔行变色】

    本文实例讲述了JavaScript实现的斑马线表格效果.分享给大家供大家参考,具体如下: 虽然现在有很多框架可以轻松的实现斑马线效果,而且兼容性也很不错,比如bootstrap,但是不可否认的是使用JavaScript实现的是兼容性最强的(浏览器不支持或禁止JavaScript脚本除外),所以今天使用原生JS实现了一个斑马线效果的表格,大家可以简单看一下,如果有需要可以留做脚本积累. html表格部分: <table> <thead> <tr> <th>Da

  • Javascript 实现 Excel 导入生成图表功能

    前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的: 怎么样?如果看了心动的话,就接着往下看吧. 本次的这个设计需要用到几个插件:jquery.js.xlsx.js.echarts.js,大家需要提前进行下载,之后新建demo.html,demo.js,style.css文件,然后新建一个你想要操作的EXCEL文件,我这里的例子是这样的: 好了,先看HTML代码,引入js,然后使用div布局,代码如下: <head> <meta chars

  • 使用纯前端JavaScript实现Excel导入导出方法过程详解

    公司最近要为某国企做一个**统计和管理系统, 具体要求包含 Excel导入导出根据导入的数据进行展示报表图表展示(包括柱状图,折线图,饼图),而且还要求要有动画效果,扁平化风格Excel导出,并要提供客户端来管理Excel 文件... 要求真多! 现在总算是完成了,于是将我的经验分析出来. 在整个项目架构中,首先就要解决Excel导入的问题. 由于公司没有自己的框架做Excel IO,就只有通过其他渠道了. 嗯,我在github上找到了一个开源库xlsx,通过npm方式来安装. npm inst

  • 前端把html表格生成为excel表格的实例

    最近公司改后台管理系统.要求导出台账项目等等为excel表格,找半天还真有,他是通过query.table2excel.js 实现,原谅我原生不会弄这个当然大家有可以给我留言. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table class="

  • asp.net中Table生成Excel表格的方法

    本文实例讲述了asp.net中Table生成Excel表格的方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <!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/19

随机推荐