智能录入表格[适合BS模式项目的录入页面]

作者：llinzzi 来源：onewww.net 时间：2008-03-09 19:02:00　

版本 0.9

来自 http://onewww.net

说明:

当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行

选择checkbox,可以进行复制,删除

双击表格会出现自动填充菜单,自动收集该列已存在数据,选中自动填充这里是亮点

数据发送采用ajax(自定义的一个ajax类,我的blog已发布过)一行一行的发送

兼容IE6和Firefox1.5 符合W3C

本表格一切功能都是为了减少输入录入工作,适合大项目开放使用

演示由于缺少服务器端,所以提交会失败

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="MSThemeCompatible" content="No"><title>智能录入表格 - asp之家</title><script type="text/JavaScript"></script><style type="text/css"></style></head><body><div id="divShowInput"> <p id="barTitle" onClick="hideDiv(this)"></p> <p id="defComP" onClick="hideDiv(this)"> <a href="javascript:void 0" onClick="clearInput()">清空</a> </p> <p id="autoFillP"> <a href="javascript:void 0" onClick="fillInput(this)">Llinzzi</a> <a href="javascript:void 0" onClick="fillInput(this)">Huanhuan</a> <a href="javascript:void 0" onClick="fillInput(this)">Tom.com</a> <a href="javascript:void 0" onClick="fillInput(this)">超级长的长长长长长长</a> </p></div><table id="tbBackground" width="760" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td><table id="tbTopOpt" width="700" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">复制所选</a></td> <td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td> <td width="38"> </td> </tr> </table></td> </tr> <tr> <td><table id="tbData" width="750" border="0" align="center" cellpadding="0" cellspacing="1"> <thead> <tr> <td height="25" ><a href="javascript:void 0" onClick="selectAll();">全选</a></td> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> <td>A5</td> <td>A6</td> <td>A7</td> <td>A8</td> <td>A9</td> <td>A10</td> <td>A11</td> </tr> </thead> <tbody> <tr> <td><input class="checkbox" type="checkbox" name="checkbox" value="checkbox"></td> <td><input name="A1" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A2" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A3" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A4" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A5" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A6" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A7" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A8" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A9" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A10" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> <td><input name="A11" type="text" onFocus="stopListen()" onBlur="beginListen()" onDblClick="showDiv(event,this)" onMouseOver="onChangTrColor(this)" onMouseOut="outChangTrColor(this)"></td> </tr> </tbody> </table></td> </tr> <tr> <td><table width="700" border="0" align="center" cellpadding="0" cellspacing="0" id="tbBomOpt"> <tr> <td height="40" width="125"><a href="javascript:void 0" onClick="copySelect()">复制所选</a></td> <td width="537"><a href="javascript:void 0" onClick="delSelect()">删除所选</a></td> <td width="537"><a href="javascript:void 0" onClick="sendData()">提交</a></td> <td width="38"> </td> </tr> </table></td> </tr></table></body></html>

标签：表格,智能,删除,ajax

投稿

智能录入表格[适合BS模式项目的录入页面]

猜你喜欢

access MDB 转换为 Execl(ASP类)

JS获取对象代码总结

Access数据库操作中出现的怪现象

轻松解决Mysql“信息包过大”的处理方法

利用Axure封装视觉标准

SQLServer 2000 升级到 SQLServer 2008 性能之需要注意的地方之一

ASP图片分页代码 (通用)

用VB编写ActiveX DLL实现ASP编程

简化ADO数据库操作的控件（带分页功能）

SQL Server SA权限最新入侵方法

MSSQL MySQL 数据库分页(存储过程)

ASP字符串16进制互转

sql 自定义百分比转换小数函数代码

用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等

图像替换新技术:状态域方法[译]

打造设计你自己的字体

浅析CMS生成静态页面的两种方案

asp如何制作一个股票滚屏显示面板？

html注释书写规范

W3C优质网页小贴士（四）