位置：首页>> 网络编程>> JavaScript>> 智能录入表格[适合BS模式项目的录入页面]

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

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

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

版本 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>

投稿

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

猜你喜欢