智能表格_javascript技巧

作者 llinzzi
版本 0.9
说明:
当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行
选择checkbox,可以进行复制,删除
双击表格会出现菜单,自动收集该列已存在数据,选中自动填充 这里是亮点
数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送
兼容IE6和Firefox1.5 符合W3C
本表格一切功能都是为了减少输入录入工作,适合大项目开放使用

清空

Llinzzi
Huanhuan
Tom.com
超级长的长长长长长长

复制所选

删除所选

全选	A1	A2	A3	A4	A5	A6	A7	A8	A9	A10	A11

复制所选

删除所选

提交

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="MSThemeCompatible" content="No"> <title>无标题文档</title> <style type="text/css"> </style> <div id="divShowInput"> <p id="barTitle" onclick="hideDiv(this)"></p> <p id="defComP" onclick="hideDiv(this)"> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="clearInput()" target="_blank" rel="nofollow">清空</a> </p> <p id="autoFillP"> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="fillInput(this)" target="_blank" rel="nofollow">Llinzzi</a> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="fillInput(this)" target="_blank" rel="nofollow">Huanhuan</a> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="fillInput(this)" target="_blank" rel="nofollow">Tom.com</a> <a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="fillInput(this)" target="_blank" rel="nofollow">超级长的长长长长长长</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="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="copySelect()" target="_blank" rel="nofollow">复制所选</a></td> <td width="537"><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="delSelect()" target="_blank" rel="nofollow">删除所选</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="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="selectAll();" target="_blank" rel="nofollow">全选</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="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="copySelect()" target="_blank" rel="nofollow">复制所选</a></td> <td width="537"><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="delSelect()" target="_blank" rel="nofollow">删除所选</a></td> <td width="537"><a href="/default/index/url?u=aHR0cHM6Ly93d3cucGhwLmNuamF2YXNjcmlwdDp2b2lkIDA=" onclick="sendData()" target="_blank" rel="nofollow">提交</a></td> <td width="38"> </td> </tr></table></td> </tr> </table>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]