当前位置：首页 > 资讯 > 技术文档

智能表格

时间：2022-11-27 01:15 编辑：来源：阅读：
扫一扫，手机访问

摘要：智能表格

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

[url=javascript:void 0] </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>

<a href="javascript:void 0" onclick="clearInput()">清空[/url]

[url=javascript:void 0]Llinzzi[/url] 
[url=javascript:void 0]Huanhuan[/url] 
[url=javascript:void 0]Tom.com[/url] 
[url=javascript:void 0]超级长的长长长长长长[/url]

</div> 
<table align="center" border="0" cellpadding="0" cellspacing="0" id="tbBackground" width="760"> 
<tr> 
<td><table align="center" border="0" cellpadding="0" cellspacing="0" id="tbTopOpt" width="700"> 
<tr> 
<td height="40" width="125">[url=javascript:void 0]复制所选[/url]</td> 
<td width="537">[url=javascript:void 0]删除所选[/url]</td> 
<td width="38"> </td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td><table align="center" border="0" cellpadding="0" cellspacing="1" id="tbData" width="750"> 
<thead> 
<tr> 
<td height="25">[url=javascript:void 0]全选[/url]</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" name="checkbox" type="checkbox" value="checkbox"></td> 
<td><input name="A1" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A2" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A3" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A4" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A5" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A6" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A7" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A8" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A9" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A10" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
<td><input name="A11" onblur="beginListen()" ondblclick="showDiv(event,this)" onfocus="stopListen()" onmouseout="outChangTrColor(this)" onmouseover="onChangTrColor(this)" type="text"></td> 
</tr> 
</tbody> 
</table></td> 
</tr> 
<tr> 
<td><table align="center" border="0" cellpadding="0" cellspacing="0" id="tbBomOpt" width="700"> 
<tr> 
<td height="40" width="125">[url=javascript:void 0]复制所选[/url]</td> 
<td width="537">[url=javascript:void 0]删除所选[/url]</td> 
<td width="537">[url=javascript:void 0]提交[/url]</td> 
<td width="38"> </td> 
</tr> 
</table></td> 
</tr> 
</table>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：javascript实现获取浏览器版本、浏览器类型
下一篇：jquery修改网页背景颜色通过css方法实现

资讯排行榜
更多>>