智能表格[适合BS模式项目的录入页面]
说明:
当焦点不在表格内的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 > 无标题文档 </ title >
< 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 >
< head >
< meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " >
< meta http - equiv = " MSThemeCompatible " content = " No " >
< title > 无标题文档 </ title >
< 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 >