智能录入表格[适合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模式项目的录入页面]

猜你喜欢

tensorflow2.0教程之Keras快速入门

unittest+coverage单元测试代码覆盖操作实例详解

Python全栈之学习CSS(2)

MySQL百万级数据大分页查询优化的实现

torch.optim优化算法理解之optim.Adam()解读

php 多个变量指向同一个引用($b = &$a)用法分析

Mootools 1.2教程(21)——类（二）

JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

详解Python如何使用并发模型编程

Elasticsearches打分机制讲解

CentOS 7 安装python3.7.1的方法及注意事项

Bootstrap Table的使用总结

在go语言中安装与使用protobuf的方法详解

Linux下安装MySQL教程

python标准库sys和OS的函数使用方法与实例详解

SQL Server 2016 CTP2.2安装配置方法图文教程

FF和IE之间7个JavaScript的差异[译]

python发送邮件实例分享

SQL Server作业报错特殊案例分析

MySQL中varchar和char类型的区别