智能表格[适合BS模式项目的录入页面]

youlong05

浏览: 147876 次
性别:
来自: 北京

最近访客更多访客>>

97wgl

wontonbread

necmy

y806839048

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

<!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">

</script>
<style type="text/css">

</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>

分享到：

求jforum单点登陆的实例代码!!!【【 | J2EE开发之常用开源项目介绍

2006-09-27 10:07
浏览 2325
评论(2)
论坛回复 / 浏览 (2 / 2654)
查看更多

2 楼 imluther 2007-01-19

<!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>

1 楼 ouspec 2006-10-04

为啥不用code 显示代码呢?可以代码高亮的

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论