CSS 仿Excel表格功能

最新推荐文章于 2022-04-13 10:08:39 发布

商商-77

最新推荐文章于 2022-04-13 10:08:39 发布

阅读量161

点赞数

文章标签： javascript xhtml ViewUI

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Spreadsheetform-www.codefans.net</title>
<style>
table.formdata{
border:1pxsolid#5F6F7E;
border-collapse:collapse;
}
table.formdatath{
border:1pxsolid#5F6F7E;
background-color:#E2E2E2;
color:#000000;
text-align:left;
font-weight:normal;
padding:2px4px2px4px;
margin:0;
}
table.formdatatd{
margin:0;
padding:0;
border:1pxsolid#E2E2E2;
}
table.formdatainput{
width:80px;
padding:2px4px2px4px;
margin:0;
border:2pxsolid#ffffff;
}
.formdatainput:focus{
border:2pxsolid#000000;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
functionhilite(obj){
obj.style.border='2pxsolid#000000';
}
functiondelite(obj){
obj.style.border='2pxsolid#ffffff';
}
</script>
</head>
<body>
<formmethod="post"action="spreadsheet.html">
<tableclass="formdata"summary="Thistablecontainsaformtoinputtheyearlyincomeforyears1999through2002">
<caption>CompletetheYearlyIncome1999-2002</caption>
<tr>
<th></th>
<thscope="col">1999</th>
<thscope="col">2000</th>
<thscope="col">2001</th>
<thscope="col">2002</th>
</tr>
<tr>
<thscope="row">Grants</th>
<td><inputtype="text"name="grants1999"id="grants1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="grants2000"id="grants2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="grants2001"id="grants2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="grants2002"id="grants2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
<tr>
<thscope="row">Donations</th>
<td><inputtype="text"name="donations1999"id="donations1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="donations2000"id="donations2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="donations2001"id="donations2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="donations2002"id="donations2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
<tr>
<thscope="row">Investments</th>
<td><inputtype="text"name="investments1999"id="investments1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="investments2000"id="investments2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="investments2001"id="investments2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="investments2002"id="investments2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
<tr>
<thscope="row">Fundraising</th>
<td><inputtype="text"name="fundraising1999"id="fundraising1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="fundraising2000"id="fundraising2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="fundraising2001"id="fundraising2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="fundraising2002"id="fundraising2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
<tr>
<thscope="row">Sales</th>
<td><inputtype="text"name="sales1999"id="sales1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="sales2000"id="sales2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="sales2001"id="sales2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="sales2002"id="sales2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
<tr>
<thscope="row">Miscellaneous</th>
<td><inputtype="text"name="misc1999"id="misc1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="misc2000"id="misc2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="misc2001"id="misc2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="misc2002"id="misc2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
<tr>
<thscope="row">Total</th>
<td><inputtype="text"name="total1999"id="total1999"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="total2000"id="total2000"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="total2001"id="total2001"onfocus="hilite(this);"onblur="delite(this);"/></td>
<td><inputtype="text"name="total2002"id="total2002"onfocus="hilite(this);"onblur="delite(this);"/></td>
</tr>
</table>
<p><inputtype="submit"name="btnSubmit"id="btnSubmit"value="AddData"/></p>
</form>
</body>
</html>

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 仿Excel表格功能

&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;title&
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。