CSS 仿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/1999/xhtml">
<head>
<title>Spreadsheet form - www.codefans.net</title>
<style>
table.formdata {
border: 1px solid #5F6F7E;
border-collapse: collapse;
}
table.formdata th {
border: 1px solid #5F6F7E;
background-color: #E2E2E2;
color: #000000;
text-align: left;
font-weight: normal;
padding: 2px 4px 2px 4px;
margin: 0;
}
table.formdata td {
margin: 0;
padding: 0;
border: 1px solid #E2E2E2;
}
table.formdata input {
width: 80px;
padding: 2px 4px 2px 4px;
margin: 0;
border: 2px solid #ffffff;
}
.formdata input:focus {
border: 2px solid #000000;
}
</style>
<script language="javascript" type="text/javascript">
function hilite(obj) {
obj.style.border = '2px solid #000000';
} function delite(obj) {
obj.style.border = '2px solid #ffffff';
}
</script>
</head>
<body>
<form method="post" action="spreadsheet.html">
<table class="formdata" summary="This table contains a form to input the yearly income for years 1999 through 2002">
<caption>Complete the Yearly Income 1999 - 2002</caption>
<tr>
<th></th>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
</tr>
<tr>
<th scope="row">Grants</th>
<td><input type="text" name="grants1999" id="grants1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="grants2000" id="grants2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="grants2001" id="grants2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="grants2002" id="grants2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
<tr>
<th scope="row">Donations</th>
<td><input type="text" name="donations1999" id="donations1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="donations2000" id="donations2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="donations2001" id="donations2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="donations2002" id="donations2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
<tr>
<th scope="row">Investments</th>
<td><input type="text" name="investments1999" id="investments1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="investments2000" id="investments2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="investments2001" id="investments2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="investments2002" id="investments2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
<tr>
<th scope="row">Fundraising</th>
<td><input type="text" name="fundraising1999" id="fundraising1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="fundraising2000" id="fundraising2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="fundraising2001" id="fundraising2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="fundraising2002" id="fundraising2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
<tr>
<th scope="row">Sales</th>
<td><input type="text" name="sales1999" id="sales1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="sales2000" id="sales2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="sales2001" id="sales2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="sales2002" id="sales2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
<tr>
<th scope="row">Miscellaneous</th>
<td><input type="text" name="misc1999" id="misc1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="misc2000" id="misc2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="misc2001" id="misc2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="misc2002" id="misc2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
<tr>
<th scope="row">Total</th>
<td><input type="text" name="total1999" id="total1999" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="total2000" id="total2000" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="total2001" id="total2001" onfocus="hilite(this);" onblur="delite(this);" /></td>
<td><input type="text" name="total2002" id="total2002" onfocus="hilite(this);" onblur="delite(this);" /></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" /></p>
</form>
</body>
</html>
CSS 仿Excel表格功能的更多相关文章
- 浏览器仿EXCEL表格插件 - 智表ZCELL产品V1.4发布
智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...
- 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.2更新
智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...
- 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3发布
智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...
- Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
- 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.1更新
智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...
- Spring Boot:添加导出Excel表格功能
1.添加POI依赖 2.创建EXCEL实体类 3.创建表格工具类 4.创建ExcelConstant 5.创建ExcelController 1.添加POI依赖 <dependency> ...
- C#导入Excel表格功能aspx.cs(代码)
using System; using System.Data; using System.Configuration; using System.Collections; using System. ...
- 网页版仿Excel效果组件--handsontable拓展运用
引言(祝看官们新年万事大吉) 前段时间项目需要实现网页版的excel表格功能,瞬间就想到了handsontable,为什么呢?理由如下:该UI组件功能齐全多样,展示效果也更贴近bootstrap风格, ...
- 个人永久性免费-Excel催化剂功能第90波-xml与json数据结构转换表格结构
在网络时代,大量的数据交互以xml和json格式提供,特别是系统间的数据交互和网络WebAPI.WebService接口的数据提供,都是通过结构化的xml或json提供给其他应用调用返回数据.若能提供 ...
随机推荐
- python爬虫中文网页cmd打印出错问题解决
问题描述 用python写爬虫,很多时候我们会先在cmd下先进行尝试. 运行爬虫之后,肯定的,我们想看看爬取的结果. 于是,我们print... 运气好的话,一切顺利.但这样的次数不多,更多地,我们会 ...
- 后盾网VIP美团网开发(基于HDPHP)(全套38课)
教程简介 本教程由后盾网讲解,共40节,主要介绍了美团网的开发,从需求分析出发,对商铺的建立.购物流程的构建及订单处理等都做了详细的介绍,非常适合做电子商务开发的朋友和同学参考学习使用,完整教程可以在 ...
- Ant 执行 YUICompressor
Ant 执行 YUICompressor 任务压缩 JavaScript 和 CSS 文件,解决中文乱码问题,增加源文件字符编码集设定 标签: javascriptantcss任务encodingnu ...
- window8配置IIS,搭建应用程序网站。
这个里面的一定要勾选,不然会有莫名其妙的错误. 在应用程序池中,如果你是64位电脑,需勾选启用32位应用程序为 true
- 第一个WP8程序,照相机
安装win8 64位,vs2013(包含wp8 sdk),百度各种得到学生开发者账户之后,终于可以试一下将自己的app部署到手机上的感觉了. 首先来个简单练练手的照相机功能 照相 即从主界面进入到照相 ...
- windows2003 单网卡 搭建vpn ,windows 2008 R2 类似吧。网上转的,自己加了点经验总结
先说说可能的坑,也就是我自己搭建的时候碰到的问题. 其实搭建起来很简单,我不知道我总结的对还是不对,但是按下面这样操作做绝对能搭好!因为我就是按这样搭起来的,但是我发现,好像pptp已经被墙了,我也不 ...
- EF实体框架之CodeFirst五
上一博客学习了下基本的约定配置,留下几个遗漏的,这篇就是学习下遗漏一复杂类型. 一.什么是复杂类型? 书中说道:“复杂类型也可视作值类型(?)可以作为附加属性添加到其他类.复杂类型与实体类型的区别在于 ...
- C++实现反射机制
NET下的很多技术都是基于反射机制来实现的,反射让.NET平台下的语言变得得心应手.最简单的,比如枚举类型,我们我可以很容易的获得一个枚举变量的数值以及其名称字符串. 可是,在C++中,枚举变量本质上 ...
- $().each() 与 $.each()解析
在jquery 中我们可以选择$().each() 与 $.each() 进行迭代对象和数组 $(items).each(function(){ //item }) , 而后者则 $.each(ite ...
- WRONGTYPE Operation against a key holding the wrong kind of value
今天改动代码,一运行就跑错了,错误原因: 因为redis中已经存在了相同的key, 而且key对应的值类型并不是Set,而是SortSet(改动前):再调用smembers时,抛出此错误. 解决方法: ...