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提供给其他应用调用返回数据.若能提供 ...
随机推荐
- Enabling CORS in WCF
Introduction This is an intermediate example of WCF as REST based solution and enabling CORS access, ...
- JS函数调用的方法
JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1.方法调用模式:先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来 ...
- ant exec
http://ant.apache.org/manual/Tasks/exec.html Exec Description Executes a system command. When the os ...
- Android中对JSONArray数组的指定项进行删除，更新。
首先假设有这么一个JSONArray JSONArray Array1;JSONArray ITEM = new JSONArray(); name为你获取要删除的字段名称,IETM就是你删除后得到的 ...
- Java系列： 关于HttpSessionListener的sessionDestroyed什么时候触发
根据书本写了下面这个监听器,然后开始调试,打开一个浏览器来访问该网页,可以正常触发sessionCreated,然后关闭浏览器,发现没有触发sessionDestroyed,然后我怀疑是不是这个监听器 ...
- iOS新加速计事件（陀螺仪和加速计）
iOS新加速计事件 [iOS新加速计事件] 1.iOS5.0以前,可以使用UIAcceleration来监听加速计事件. 2.Bug iOS5.0以后,UIAccelerometerDelegate已 ...
- IOS开发之——意见反馈UITextView的使用+不能输入字符输入
@interface DMFeedbackViewController ()<UITextViewDelegate,UIAlertViewDelegate>@property (nonat ...
- Promise 学习笔记 - 时间支配者
本文同步自我的个人博客:http://www.52cik.com/2015/11/08/promise.html JavaScript 的 promises 事实标准称为 Promises/A+.ES ...
- Android Studio导入Eclipse项目和一些常见的问题
Android Studio版本 Eclipse项目工程:一个主工程,一个Emojicon依赖库. 有两种方式导入Eclipse工程: 1.兼容Eclipse 2.全新的Android Gradle ...
- [BZOJ 1295][SCOI2009]最长距离（SPFA+暴力）
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1295 分析:很巧妙的一道spfa从搜索的角度是搜索在所有1中搜索删除哪T个1,对整个图询问,这 ...