Ajax实现智能表格(适合B/S模式项目的录入页面)

来源:互联网 发布:c语言闰年怎么算 编辑:程序博客网 时间:2024/05/18 13:25
Ajax实现智能表格(适合BS模式项目的录入页面)
说明:
当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行
选择checkbox,可以进行复制,删除
双击表格会出现菜单,自动收集该列已存在数据,选中自动填充 这里是亮点
数据发送采用ajax(自定义的一个ajax类,blog已发布过)一行一行的发送
兼容IE6,IE7和Firefox1.5 符合W3C
本表格一切功能都是为了减少输入录入工作,适合大项目开放使用.尤其是B/S项目

程序代码 程序代码
<!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>无标题文档</title><script type="text/javascript">google_ad_client = "pub-4475724770859924";google_alternate_color = "FFBBE8";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="9379930647";google_color_border = "F0F0F0";google_color_bg = "FFFFFF";google_color_link = "FF6FCF";google_color_url = "38B63C";google_color_text = "B3B3B3";</script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--
//////////////////////////////////////////页面初始化///////////////////////////////////////
beginListen();
//////////////////////////////////////////页面初始化///////////////////////////////////////
//////////////////////////////////////////ajax类///////////////////////////////////////
function Ajax(url,recvT,stringS,resultF) {
this.url = url;
this.stringS = stringS;
this.xmlHttp = this.createXMLHttpRequest();
if (this.xmlHttp == null) {
alert("erro");
return;
}
var objxml = this.xmlHttp;
objxml.onreadystatechange = function (){Ajax.handleStateChange(objxml,recvT,resultF)};
}

Ajax.prototype.createXMLHttpRequest = function() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
try { return new XMLHttpRequest(); } catch(e) {}
return null;
}

Ajax.prototype.createQueryString = function () {
var queryString = this.stringS;
return queryString;
}

Ajax.prototype.get = function () {
url = this.url;
var queryString = url+"?timeStamp=" + new Date().getTime() + "&" + this.createQueryString();
this.xmlHttp.open("GET",queryString,true);
this.xmlHttp.send(null);
}

Ajax.prototype.post = function() {
url = this.url;
var url = url + "?timeStamp=" + new Date().getTime();
var queryString = this.createQueryString();
this.xmlHttp.open("POST",url,true);
this.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
this.xmlHttp.send(queryString);
}

Ajax.handleStateChange = function (xmlHttp,recvT,resultF) {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
resultF(recvT?xmlHttp.responseXML:xmlHttp.responseText);
} else {
alert("您所请求的页面有异常。");
}
}
}
//////////////////////////////////////////ajax类///////////////////////////////////////

//////////////////////////////////////////处理鼠标事件///////////////////////////////////////
//表格变色
var toBeColor = "#F8F9FC";
var backColor = "#FFFFFF";
function onChangTrColor(obj) {
obj.parentNode.style.backgroundColor = toBeColor;
obj.style.backgroundColor = toBeColor;
var inputs = obj.parentNode.parentNode.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++ ){
inputs[i].style.backgroundColor = toBeColor;
inputs[i].parentNode.style.backgroundColor = toBeColor;
}
}

function outChangTrColor(obj) {
obj.parentNode.style.backgroundColor = backColor;
obj.style.backgroundColor = backColor;
var inputs = obj.parentNode.parentNode.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++ ){
inputs[i].style.backgroundColor = backColor;
inputs[i].parentNode.style.backgroundColor = backColor;
}
}

//////////////////////////////////////////处理鼠标事件///////////////////////////////////////

//////////////////////////////////////////处理页面操作///////////////////////////////////////
//复制所选
function copySelect(){
var checkboxs = document.getElementsByName("checkbox");
for (var i=0; i<checkboxs.length; i++) {
if(checkboxs[i].checked == true){
checkboxs[i].checked = false;
copyTr(checkboxs[i]);
checkboxs[i].checked = true;
}
}
}

function copyTr(obj) {
var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];
var Str = obj.parentNode.parentNode;
var tr = Str.cloneNode(true);
tbody.appendChild(tr);
}

//删除所选
function delSelect(){
var checkboxs = document.getElementsByName("checkbox");
var table = document.getElementById("tbData");
var tr = table.getElementsByTagName("tr");
for (var i=0; i<checkboxs.length; i++) {
if(tr.length==2){
checkboxs[i].checked = false;
return;
}
if(checkboxs[i].checked==true){
removeTr(checkboxs[i]);
i=-1;
}
}
}

function removeTr(obj) {
var sTr = obj.parentNode.parentNode;
sTr.parentNode.removeChild(sTr);
}

//全选按钮
function selectAll() {
var checkboxs = document.getElementsByName("checkbox");
var mark = true;
for (var i=0; i<checkboxs.length; i++) {
if (checkboxs[i].checked==false){mark = false}
}
if (mark){
for (var i=0; i<checkboxs.length; i++) {
checkboxs[i].checked = false;
}
}else{
for (var i=0; i<checkboxs.length; i++) {
checkboxs[i].checked = true;
}
}
}

//////////////////////////////////////////处理页面操作///////////////////////////////////////

//////////////////////////////////////////处理键盘操作///////////////////////////////////////
//键盘事件
function beginListen(){
if(document.addEventListener){
document.addEventListener("keydown",keyDown,true);
}else{
document.attachEvent("onkeydown",keyDown);
}
}
function stopListen(){
document.detachEvent("onkeydown",keyDown);
}

//处理键盘事件
function keyDown(event){
if(event.keyCode==13){addTr()}
if(event.keyCode==46){delTr()}
}

//增加表格
function addTr() {
var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];
var sTr = tbody.getElementsByTagName("tr")[0];
var tr = sTr.cloneNode(true);
tbody.appendChild(tr);
}

//增加表格
function addTr() {
var tbody = document.getElementById("tbData").getElementsByTagName("tbody")[0];
var trs = tbody.getElementsByTagName("tr");
var sTr = trs[trs.length-1];
var tr = sTr.cloneNode(true);
tbody.appendChild(tr);
}

//删除表格
function delTr() {
var table = document.getElementById("tbData");
var tr = table.getElementsByTagName("tr");
if(tr.length==2){return;}
var lastTr = tr[tr.length-1];
lastTr.parentNode.removeChild(lastTr);
}


//////////////////////////////////////////处理键盘操作///////////////////////////////////////

//////////////////////////////////////////处理按钮事件///////////////////////////////////////
//自动填充
var currentObj;
function showDiv(event,obj) {
var eX = event.clientX;
var eY = event.clientY;
var sY = document.body.parentNode.scrollTop;
var dY = eY + sY;
var divShowInput = document.getElementById("divShowInput");
divShowInput.style.top = dY + "px";
divShowInput.style.left = eX+"px";
divShowInput.style.display = "block";
currentObj = obj;
////智能菜单////
fixMenu();
//判断焦点位置
var tds = obj.parentNode.parentNode.getElementsByTagName("td");
var tdOrder;
for (var i = 0; i < tds.length; i++ ){
if(tds[i] === obj.parentNode){
tdOrder = i;
}
}
//填充标题标题
var tdTitleTr = document.getElementById("tbData").getElementsByTagName("tr")[0];
var tdTitle = tdTitleTr.getElementsByTagName("td")[tdOrder];
document.getElementById("barTitle").innerHTML = tdTitle.innerHTML;
//收集表格信息//判断重复
var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName("tr");
var autoFillP = document.getElementById("autoFillP");
var bankM = true;
for (var i = 0; i < trs.length; i++ ){
var inputValue = trs[i].getElementsByTagName("td")[tdOrder].getElementsByTagName("input")[0].value;
if (inputValue != "") {
bankM = false;
var menus = autoFillP.getElementsByTagName("a");
if(menus.length > 0) {
var beliveM = true;
for (var j = 0; j < menus.length; j++ ){
if(menus[j].firstChild.nodeValue == inputValue) {
beliveM = false;
}
}
if(beliveM){
var Svalue = document.createElement("a");
Svalue.setAttribute("href","javascript:void 0");
Svalue.onclick = function () {fillInput(this)};
var Stext = document.createTextNode(inputValue);
Svalue.appendChild(Stext);
autoFillP.appendChild(Svalue);
}
}else{
var Svalue = document.createElement("a");
Svalue.setAttribute("href","javascript:void 0");
Svalue.onclick = function () {fillInput(this)};
var Stext = document.createTextNode(inputValue);
Svalue.appendChild(Stext);
autoFillP.appendChild(Svalue);
}
}
}
if(bankM) {
var Svalue = document.createElement("a");
Svalue.setAttribute("href","javascript:void 0");
var Stext = document.createTextNode("数据空");
Svalue.appendChild(Stext);
autoFillP.appendChild(Svalue);
}
}

function fillInput(obj) {
currentObj.value = obj.innerHTML;
var divShowInput = document.getElementById("divShowInput");
divShowInput.style.display = "none";
}

function clearInput() {
currentObj.value = "";
var divShowInput = document.getElementById("divShowInput");
divShowInput.style.display = "none";
}

function hideDiv(obj) {
obj.parentNode.style.display = "none";
}

//删除智能菜单已有数据
function fixMenu() {
var autoFillP = document.getElementById("autoFillP");
var values = autoFillP.getElementsByTagName("a");
for (var i = values.length-1; i >= 0; i-- ){
autoFillP.removeChild(values[i]);
}
}
//////////////////////////////////////////处理按钮事件///////////////////////////////////////

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

//////////////////////////////////////////数据发送///////////////////////////////////////
function sendData() {
var sendName = new Array("ok","A1","A2","A3","A4","A5","A6","A7","A8","A9","A10","A11");
var trs = document.getElementById("tbData").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
var sendValue = new Array();
var values = trs[i].getElementsByTagName("input");
var postString = sendName[1] + "=" + values[1].value;;
for (var j = 2; j < values.length; j++) {
postString = postString + "&" + sendName[j] + "=" + values[j].value;
}
var SendAjax = new Ajax("isave.asp",0,postString,sendok);
SendAjax.post();
function sendok(revData){
alert(revData);
}
}
}



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


//-->
</script>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #E9EDF7;
}
#tbBackground {
background-color:#FFFFFF;
text-align:center;
}
#tbData {
background-color:#DDE3EC;
}
#tbData td {
background-color:#FFFFFF;
}
#tbData input {
width:50px;
border:none;
}
#tbData .checkbox {
width:15px;
}

#tbData thead {
}

#tbTopOpt a{
display:block;
width:80px;
padding:5px;
background-color:#F8F9FC;
border:solid 1px #999999;
color:#000000;
text-decoration: none;
}
#tbTopOpt a:hover{
background-color:#DDE3EC;
}
#tbBomOpt a{
display:block;
width:80px;
padding:5px;
background-color:#F8F9FC;
border:solid 1px #999999;
color:#000000;
text-decoration: none;
}
#tbBomOpt a:hover{
background-color:#DDE3EC;
}
#tbData a{
color:#000000;
text-decoration: none;
}

#divShowInput {
position:absolute;
top:30px;
left:350px;
z-index:10;
background-color:#F8F9FC;
display:none;
border:solid 1px #DDE3EC;
width:100px;
overflow:hidden;
}
#divShowInput a {
display:block;
background-color:#F8F9FC;
color:#000000;
text-decoration: none;
text-align:center;
width:auto;
}
#divShowInput a:hover {
background-color:#DDE3EC;
border-left:solid 2px #FF0000;
border-right:solid 2px #FF0000;
color:#FF0000;
}

#divShowInput p {
cursor:hand;
margin:0;
padding:0;
background-color:#F8F9FC;
text-align:center;
border-bottom:double #DDE3EC;
}
-->
</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>

HTML代码
<textarea id="temp52698" rows="8">&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;&lt;a href=&quot;http://www.w3.org/TR/html4/loose.dtd&quot; target=&quot;_blank&quot;&gt;http://www.w3.org/TR/html4/loose.dtd&lt;/a&gt;&quot;&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;&lt;meta http-equiv=&quot;MSThemeCompatible&quot; content=&quot;No&quot;&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;script type=&quot;text/JavaScript&quot;&gt;&lt;!--//////////////////////////////////////////页面初始化///////////////////////////////////////beginListen();//////////////////////////////////////////页面初始化/////////////////////////////////////////////////////////////////////////////////ajax类///////////////////////////////////////function Ajax(url,recvT,stringS,resultF) {this.url = url;this.stringS = stringS;this.xmlHttp = this.createXMLHttpRequest();if (this.xmlHttp == null) {alert(&quot;erro&quot;);return;}var objxml = this.xmlHttp;objxml.onreadystatechange = function (){Ajax.handleStateChange(objxml,recvT,resultF)};}Ajax.prototype.createXMLHttpRequest = function() {try { return new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch(e) {}try { return new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch(e) {}try { return new XMLHttpRequest(); } catch(e) {}return null;}Ajax.prototype.createQueryString = function () {var queryString = this.stringS;return queryString;}Ajax.prototype.get = function () {url = this.url;var queryString = url+&quot;?timeStamp=&quot; + new Date().getTime() + &quot;&amp;&quot; + this.createQueryString();this.xmlHttp.open(&quot;GET&quot;,queryString,true);this.xmlHttp.send(null);}Ajax.prototype.post = function() {url = this.url;var url = url + &quot;?timeStamp=&quot; + new Date().getTime();var queryString = this.createQueryString();this.xmlHttp.open(&quot;POST&quot;,url,true);this.xmlHttp.setRequestHeader(&quot;Content-Type&quot;,&quot;application/x-www-form-urlencoded&quot;);this.xmlHttp.send(queryString);}Ajax.handleStateChange = function (xmlHttp,recvT,resultF) {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {resultF(recvT?xmlHttp.responseXML:xmlHttp.responseText);} else {alert(&quot;您所请求的页面有异常。&quot;);}}}//////////////////////////////////////////ajax类/////////////////////////////////////////////////////////////////////////////////处理鼠标事件/////////////////////////////////////////表格变色var toBeColor = &quot;#F8F9FC&quot;;&lt;script type=&quot;text/javascript&quot;&gt;google_ad_client = &quot;pub-4475724770859924&quot;;google_alternate_color = &quot;FFBBE8&quot;;google_ad_width = 468;google_ad_height = 60;google_ad_format = &quot;468x60_as&quot;;google_ad_type = &quot;text_image&quot;;google_ad_channel =&quot;9379930647&quot;;google_color_border = &quot;F0F0F0&quot;;google_color_bg = &quot;FFFFFF&quot;;google_color_link = &quot;FF6FCF&quot;;google_color_url = &quot;38B63C&quot;;google_color_text = &quot;B3B3B3&quot;;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;&lt;/script&gt;var backColor = &quot;#FFFFFF&quot;;function onChangTrColor(obj) {obj.parentNode.style.backgroundColor = toBeColor;obj.style.backgroundColor = toBeColor;var inputs = obj.parentNode.parentNode.getElementsByTagName(&quot;input&quot;);for (var i = 0; i &lt; inputs.length; i++ ){inputs[i].style.backgroundColor = toBeColor;inputs[i].parentNode.style.backgroundColor = toBeColor;}}function outChangTrColor(obj) {obj.parentNode.style.backgroundColor = backColor;obj.style.backgroundColor = backColor;var inputs = obj.parentNode.parentNode.getElementsByTagName(&quot;input&quot;);for (var i = 0; i &lt; inputs.length; i++ ){inputs[i].style.backgroundColor = backColor;inputs[i].parentNode.style.backgroundColor = backColor;}}//////////////////////////////////////////处理鼠标事件/////////////////////////////////////////////////////////////////////////////////处理页面操作/////////////////////////////////////////复制所选function copySelect(){var checkboxs = document.getElementsByName(&quot;checkbox&quot;);for (var i=0; i&lt;checkboxs.length; i++) {if(checkboxs[i].checked == true){checkboxs[i].checked = false;copyTr(checkboxs[i]);checkboxs[i].checked = true;}}}function copyTr(obj) {var tbody = document.getElementById(&quot;tbData&quot;).getElementsByTagName(&quot;tbody&quot;)[0];var Str = obj.parentNode.parentNode;var tr = Str.cloneNode(true);tbody.appendChild(tr);}//删除所选function delSelect(){var checkboxs = document.getElementsByName(&quot;checkbox&quot;);var table = document.getElementById(&quot;tbData&quot;);var tr = table.getElementsByTagName(&quot;tr&quot;);for (var i=0; i&lt;checkboxs.length; i++) {if(tr.length==2){checkboxs[i].checked = false;return;}if(checkboxs[i].checked==true){removeTr(checkboxs[i]);i=-1;}}}function removeTr(obj) {var sTr = obj.parentNode.parentNode;sTr.parentNode.removeChild(sTr);}//全选按钮function selectAll() {var checkboxs = document.getElementsByName(&quot;checkbox&quot;);var mark = true;for (var i=0; i&lt;checkboxs.length; i++) {if (checkboxs[i].checked==false){mark = false}}if (mark){for (var i=0; i&lt;checkboxs.length; i++) {checkboxs[i].checked = false;}}else{for (var i=0; i&lt;checkboxs.length; i++) {checkboxs[i].checked = true;}}}//////////////////////////////////////////处理页面操作/////////////////////////////////////////////////////////////////////////////////处理键盘操作/////////////////////////////////////////键盘事件function beginListen(){if(document.addEventListener){document.addEventListener(&quot;keydown&quot;,keyDown,true);}else{document.attachEvent(&quot;onkeydown&quot;,keyDown);}}function stopListen(){document.detachEvent(&quot;onkeydown&quot;,keyDown);}//处理键盘事件function keyDown(event){if(event.keyCode==13){addTr()}if(event.keyCode==46){delTr()}}//增加表格function addTr() {var tbody = document.getElementById(&quot;tbData&quot;).getElementsByTagName(&quot;tbody&quot;)[0];var sTr = tbody.getElementsByTagName(&quot;tr&quot;)[0];var tr = sTr.cloneNode(true);tbody.appendChild(tr);}//增加表格function addTr() {var tbody = document.getElementById(&quot;tbData&quot;).getElementsByTagName(&quot;tbody&quot;)[0];var trs = tbody.getElementsByTagName(&quot;tr&quot;);var sTr = trs[trs.length-1];var tr = sTr.cloneNode(true);tbody.appendChild(tr);}//删除表格function delTr() {var table = document.getElementById(&quot;tbData&quot;);var tr = table.getElementsByTagName(&quot;tr&quot;);if(tr.length==2){return;}var lastTr = tr[tr.length-1];lastTr.parentNode.removeChild(lastTr);}//////////////////////////////////////////处理键盘操作/////////////////////////////////////////////////////////////////////////////////处理按钮事件/////////////////////////////////////////自动填充var currentObj;function showDiv(event,obj) {var eX = event.clientX;var eY = event.clientY;var sY = document.body.parentNode.scrollTop;var dY = eY + sY;var divShowInput = document.getElementById(&quot;divShowInput&quot;);divShowInput.style.top = dY + &quot;px&quot;;divShowInput.style.left = eX+&quot;px&quot;;divShowInput.style.display = &quot;block&quot;;currentObj = obj;////智能菜单////fixMenu();//判断焦点位置var tds = obj.parentNode.parentNode.getElementsByTagName(&quot;td&quot;);var tdOrder;for (var i = 0; i &lt; tds.length; i++ ){if(tds[i] === obj.parentNode){tdOrder = i;}}//填充标题标题var tdTitleTr = document.getElementById(&quot;tbData&quot;).getElementsByTagName(&quot;tr&quot;)[0];var tdTitle = tdTitleTr.getElementsByTagName(&quot;td&quot;)[tdOrder];document.getElementById(&quot;barTitle&quot;).innerHTML = tdTitle.innerHTML;//收集表格信息//判断重复var trs = obj.parentNode.parentNode.parentNode.getElementsByTagName(&quot;tr&quot;);var autoFillP = document.getElementById(&quot;autoFillP&quot;);var bankM = true;for (var i = 0; i &lt; trs.length; i++ ){var inputValue = trs[i].getElementsByTagName(&quot;td&quot;)[tdOrder].getElementsByTagName(&quot;input&quot;)[0].value;if (inputValue != &quot;&quot;) {bankM = false;var menus = autoFillP.getElementsByTagName(&quot;a&quot;);if(menus.length &gt; 0) {var beliveM = true;for (var j = 0; j &lt; menus.length; j++ ){if(menus[j].firstChild.nodeValue == inputValue) {beliveM = false;}}if(beliveM){var Svalue = document.createElement(&quot;a&quot;);Svalue.setAttribute(&quot;href&quot;,&quot;javascript:void 0&quot;);Svalue.onclick = function () {fillInput(this)};var Stext = document.createTextNode(inputValue);Svalue.appendChild(Stext);autoFillP.appendChild(Svalue);}}else{var Svalue = document.createElement(&quot;a&quot;);Svalue.setAttribute(&quot;href&quot;,&quot;javascript:void 0&quot;);Svalue.onclick = function () {fillInput(this)};var Stext = document.createTextNode(inputValue);Svalue.appendChild(Stext);autoFillP.appendChild(Svalue);}}}if(bankM) {var Svalue = document.createElement(&quot;a&quot;);Svalue.setAttribute(&quot;href&quot;,&quot;javascript:void 0&quot;);var Stext = document.createTextNode(&quot;数据空&quot;);Svalue.appendChild(Stext);autoFillP.appendChild(Svalue);}}function fillInput(obj) {currentObj.value = obj.innerHTML;var divShowInput = document.getElementById(&quot;divShowInput&quot;);divShowInput.style.display = &quot;none&quot;;}function clearInput() {currentObj.value = &quot;&quot;;var divShowInput = document.getElementById(&quot;divShowInput&quot;);divShowInput.style.display = &quot;none&quot;;}function hideDiv(obj) {obj.parentNode.style.display = &quot;none&quot;;}//删除智能菜单已有数据function fixMenu() {var autoFillP = document.getElementById(&quot;autoFillP&quot;);var values = autoFillP.getElementsByTagName(&quot;a&quot;);for (var i = values.length-1; i &gt;= 0; i-- ){autoFillP.removeChild(values[i]);}}//////////////////////////////////////////处理按钮事件/////////////////////////////////////////////////////////////////////////////////数据发送/////////////////////////////////////////////////////////////////////////////////数据发送///////////////////////////////////////function sendData() {var sendName = new Array(&quot;ok&quot;,&quot;A1&quot;,&quot;A2&quot;,&quot;A3&quot;,&quot;A4&quot;,&quot;A5&quot;,&quot;A6&quot;,&quot;A7&quot;,&quot;A8&quot;,&quot;A9&quot;,&quot;A10&quot;,&quot;A11&quot;);var trs = document.getElementById(&quot;tbData&quot;).getElementsByTagName(&quot;tbody&quot;)[0].getElementsByTagName(&quot;tr&quot;);for (var i = 0; i &lt; trs.length; i++) {var sendValue = new Array();var values = trs[i].getElementsByTagName(&quot;input&quot;);var postString = sendName[1] + &quot;=&quot; + values[1].value;;for (var j = 2; j &lt; values.length; j++) {postString = postString + &quot;&amp;&quot; + sendName[j] + &quot;=&quot; + values[j].value;}var SendAjax = new Ajax(&quot;isave.asp&quot;,0,postString,sendok);SendAjax.post();function sendok(revData){alert(revData);}}}//////////////////////////////////////////数据发送/////////////////////////////////////////--&gt;&lt;/script&gt;&lt;style type=&quot;text/css&quot;&gt;&lt;!--body {font-family: Arial, Helvetica, sans-serif;font-size: 12px;background-color: #E9EDF7;}#tbBackground {background-color:#FFFFFF;text-align:center;}#tbData {background-color:#DDE3EC;}#tbData td {background-color:#FFFFFF;}#tbData input {width:50px;border:none;}#tbData .checkbox {width:15px;}#tbData thead {}#tbTopOpt a{display:block;width:80px;padding:5px;background-color:#F8F9FC;border:solid 1px #999999;color:#000000;text-decoration: none;}#tbTopOpt a:hover{background-color:#DDE3EC;}#tbBomOpt a{display:block;width:80px;padding:5px;background-color:#F8F9FC;border:solid 1px #999999;color:#000000;text-decoration: none;}#tbBomOpt a:hover{background-color:#DDE3EC;}#tbData a{color:#000000;text-decoration: none;}#divShowInput {position:absolute;top:30px;left:350px;z-index:10;background-color:#F8F9FC;display:none;border:solid 1px #DDE3EC;width:100px;overflow:hidden;}#divShowInput a {display:block;background-color:#F8F9FC;color:#000000;text-decoration: none;text-align:center;width:auto;}#divShowInput a:hover {background-color:#DDE3EC;border-left:solid 2px #FF0000;border-right:solid 2px #FF0000;color:#FF0000;}#divShowInput p {cursor:hand;margin:0;padding:0;background-color:#F8F9FC;text-align:center;border-bottom:double #DDE3EC;}--&gt;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;divShowInput&quot;&gt;&lt;p id=&quot;barTitle&quot; onClick=&quot;hideDiv(this)&quot;&gt;&lt;/p&gt;&lt;p id=&quot;defComP&quot; onClick=&quot;hideDiv(this)&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;clearInput()&quot;&gt;清空&lt;/a&gt;&lt;/p&gt;&lt;p id=&quot;autoFillP&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;fillInput(this)&quot;&gt;Llinzzi&lt;/a&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;fillInput(this)&quot;&gt;Huanhuan&lt;/a&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;fillInput(this)&quot;&gt;Tom.com&lt;/a&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;fillInput(this)&quot;&gt;超级长的长长长长长长&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;&lt;table id=&quot;tbBackground&quot; width=&quot;760&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;table id=&quot;tbTopOpt&quot; width=&quot;700&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;&lt;tr&gt;&lt;td height=&quot;40&quot; width=&quot;125&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;copySelect()&quot;&gt;复制所选&lt;/a&gt;&lt;/td&gt;&lt;td width=&quot;537&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;delSelect()&quot;&gt;删除所选&lt;/a&gt;&lt;/td&gt;&lt;td width=&quot;38&quot;&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;table id=&quot;tbData&quot; width=&quot;750&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;1&quot;&gt;&lt;thead&gt;&lt;tr&gt;&lt;td height=&quot;25&quot; &gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;selectAll();&quot;&gt;全选&lt;/a&gt;&lt;/td&gt;&lt;td&gt;A1&lt;/td&gt;&lt;td&gt;A2&lt;/td&gt;&lt;td&gt;A3&lt;/td&gt;&lt;td&gt;A4&lt;/td&gt;&lt;td&gt;A5&lt;/td&gt;&lt;td&gt;A6&lt;/td&gt;&lt;td&gt;A7&lt;/td&gt;&lt;td&gt;A8&lt;/td&gt;&lt;td&gt;A9&lt;/td&gt;&lt;td&gt;A10&lt;/td&gt;&lt;td&gt;A11&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;input class=&quot;checkbox&quot; type=&quot;checkbox&quot; name=&quot;checkbox&quot; value=&quot;checkbox&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A1&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A2&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A3&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A4&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A5&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A6&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A7&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A8&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A9&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A10&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;td&gt;&lt;input name=&quot;A11&quot; type=&quot;text&quot; onFocus=&quot;stopListen()&quot; onBlur=&quot;beginListen()&quot; onDblClick=&quot;showDiv(event,this)&quot; onMouseOver=&quot;onChangTrColor(this)&quot; onMouseOut=&quot;outChangTrColor(this)&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;table width=&quot;700&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tbBomOpt&quot;&gt;&lt;tr&gt;&lt;td height=&quot;40&quot; width=&quot;125&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;copySelect()&quot;&gt;复制所选&lt;/a&gt;&lt;/td&gt;&lt;td width=&quot;537&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;delSelect()&quot;&gt;删除所选&lt;/a&gt;&lt;/td&gt;&lt;td width=&quot;537&quot;&gt;&lt;a href=&quot;javascript:void 0&quot; onClick=&quot;sendData()&quot;&gt;提交&lt;/a&gt;&lt;/td&gt;&lt;td width=&quot;38&quot;&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</textarea>

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
 
原创粉丝点击