<!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表格功能的更多相关文章

  1. 浏览器仿EXCEL表格插件 - 智表ZCELL产品V1.4发布

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  2. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.2更新

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  3. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3发布

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  4. Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格

    目录 一.概述 二.效果展示 三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线 四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...

  5. 浏览器仿EXCEL表格插件 版本更新 - 智表ZCELL产品V1.3.1更新

    智表(zcell)是一款浏览器仿excel表格jquery插件.智表可以为你提供excel般的智能体验,支持双击编辑.设置公式.设置显示小数精度.下拉框.自定义单元格.复制粘贴.不连续选定.合并单元格 ...

  6. Spring Boot：添加导出Excel表格功能

    1.添加POI依赖 2.创建EXCEL实体类 3.创建表格工具类 4.创建ExcelConstant 5.创建ExcelController 1.添加POI依赖 <dependency> ...

  7. C#导入Excel表格功能aspx.cs（代码）

    using System; using System.Data; using System.Configuration; using System.Collections; using System. ...

  8. 网页版仿Excel效果组件--handsontable拓展运用

    引言(祝看官们新年万事大吉) 前段时间项目需要实现网页版的excel表格功能,瞬间就想到了handsontable,为什么呢?理由如下:该UI组件功能齐全多样,展示效果也更贴近bootstrap风格, ...

  9. 个人永久性免费-Excel催化剂功能第90波-xml与json数据结构转换表格结构

    在网络时代,大量的数据交互以xml和json格式提供,特别是系统间的数据交互和网络WebAPI.WebService接口的数据提供,都是通过结构化的xml或json提供给其他应用调用返回数据.若能提供 ...

随机推荐

  1. getLovParameter

    else if (pageContext.isLovEvent()) { StHelper.handleLovEvent(pageContext, webBean); } public static ...

  2. jQuery Event.stopPropagation() 函数详解

    stopPropagation()函数用于阻止当前事件在DOM树上冒泡. 根据DOM事件流机制,在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上,如果这些祖辈元素上也绑定了相应的事件处理函 ...

  3. Asp.net用户控件和委托事件

    在Asp.net系统制作过程中,门户类型的网站,我们可以用DIV+CSS+JS+Ajax全部搞定,但是一旦遇到界面元素比较复杂的时候,还是UserControl比较方便一些,各种封装,各种处理,然后拖 ...

  4. 2015年新版C#从入门到精通(第2版)视频教学录像【无水印版】

    <c#从入门到精通(第2版)>以零基础讲解为宗旨,用实例引导读者学习,深入浅出地介绍了c#的相关知识和实战技能.<c#从入门到精通(第2版)>第1篇[c#语言基础]主要讲解c# ...

  5. 传智播客C++第五期培训视频教程免费下载

    C/C++的应用领域几乎无处不在,服务器,嵌入式,物联网,移动互联网,信息安全,游戏,基本上大小通吃.C/C++市场份额高达26%,也就是每四个程序员就有一个C/C++程序员.市场需求量非常大,而且工 ...

  6. 10个鲜为人知的WordPress函数

    WordPress功能强大,非常适合开发者使用.说到 WordPress,那么,我们不得不说他的钩子函数.今天,要为大家推荐10个WordPress函数.大多数,都是我们常用的功能,不过,经常不知道如 ...

  7. 修改TrustedInstaller权限文件（无法删除文件）

    1.    右击需要修改的文件-属性 2.    切换到"安全"选项卡,点击"高级"按钮. 3.    切换到"所有者"选项卡 一般情况下默 ...

  8. [CareerCup] 9.3 Magic Index 魔法序号

    9.3 A magic index in an array A[0.. .n-1] is defined to be an index such that A[i] = i. Given a sort ...

  9. Linux 基础入门 第二周9.21~9.27

    一.学习内容 本周主要学习内容主要贴合: 在进行<深入理解计算机系统>这门课的实验中没有遇到什么大问题,学习内容与上周实验<linux基础入门>有相似之处.本实验中的内容比较贴 ...

  10. Pjax.js防刷新技术

    自我感觉良好,所以拿出现在自己用的 Pjax.js 分享给大家 当然 这个版本是 经过本人修改后的版本,跟其它 拿过来就用的 不一样 而且区别还不小 大多的 Pjax 都是 跟后台无关的,而这个版本是 ...