智能表格
智能表格
发布时间:2016-12-30 来源:查字典编辑
摘要:作者llinzzi版本0.9说明:当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行选择checkbox,可以进...

作者llinzzi

版本0.9

说明:

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

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

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

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

兼容IE6和Firefox1.5符合W3C

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

复制代码 代码如下:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

<metahttp-equiv="MSThemeCompatible"content="No">

<title>无标题文档</title>

<scripttype="text/JavaScript">

<){

autoFillP.removeChild(values[i]);

}

}

//////////////////////////////////////////处理按钮事件///////////////////////////////////////

//////////////////////////////////////////数据发送///////////////////////////////////////

//////////////////////////////////////////数据发送///////////////////////////////////////

functionsendData(){

varsendName=newArray("ok","A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11");

vartrs=document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr");

for(vari=0;i<trs.length;i++){

varsendValue=newArray();

varvalues=trs[i].getElementsByTagName("input");

varpostString=sendName[1]+"="+values[1].value;;

for(varj=2;j<values.length;j++){

postString=postString+"&"+sendName[j]+"="+values[j].value;

}

varSendAjax=newAjax("isave.asp",0,postString,sendok);

SendAjax.post();

functionsendok(revData){

alert(revData);

}

}

}

//////////////////////////////////////////数据发送///////////////////////////////////////

//-->

</script>

<styletype="text/css">

<>

</style>

</head>

<body>

<divid="divShowInput">

<pid="barTitle"onClick="hideDiv(this)"></p>

<pid="defComP"onClick="hideDiv(this)">

<ahref="javascript:void0"onClick="clearInput()">清空</a>

</p>

<pid="autoFillP">

<ahref="javascript:void0"onClick="fillInput(this)">Llinzzi</a>

<ahref="javascript:void0"onClick="fillInput(this)">Huanhuan</a>

<ahref="javascript:void0"onClick="fillInput(this)">Tom.com</a>

<ahref="javascript:void0"onClick="fillInput(this)">超级长的长长长长长长</a>

</p>

</div>

<tableid="tbBackground"width="760"border="0"align="center"cellpadding="0"cellspacing="0">

<tr>

<td><tableid="tbTopOpt"width="700"border="0"align="center"cellpadding="0"cellspacing="0">

<tr>

<tdheight="40"width="125"><ahref="javascript:void0"onClick="copySelect()">复制所选</a></td>

<tdwidth="537"><ahref="javascript:void0"onClick="delSelect()">删除所选</a></td>

<tdwidth="38"></td>

</tr>

</table></td>

</tr>

<tr>

<td><tableid="tbData"width="750"border="0"align="center"cellpadding="0"cellspacing="1">

<thead>

<tr>

<tdheight="25"><ahref="javascript:void0"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><inputclass="checkbox"type="checkbox"name="checkbox"value="checkbox"></td>

<td><inputname="A1"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A2"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A3"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A4"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A5"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A6"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A7"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A8"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A9"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="A10"type="text"onFocus="stopListen()"onBlur="beginListen()"onDblClick="showDiv(event,this)"onMouseOver="onChangTrColor(this)"onMouseOut="outChangTrColor(this)"></td>

<td><inputname="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><tablewidth="700"border="0"align="center"cellpadding="0"cellspacing="0"id="tbBomOpt">

<tr>

<tdheight="40"width="125"><ahref="javascript:void0"onClick="copySelect()">复制所选</a></td>

<tdwidth="537"><ahref="javascript:void0"onClick="delSelect()">删除所选</a></td>

<tdwidth="537"><ahref="javascript:void0"onClick="sendData()">提交</a></td>

<tdwidth="38"></td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

无标题文档

清空

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

复制所选 删除所选
全选 A1 A2 A3 A4 A5 A6 A7 A8 A9 A10 A11
复制所选 删除所选 提交

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类