智能表格_javascript技巧



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







//////////////////////////////////////////页面初始化///////////////////////////////////////
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 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 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 if (checkboxs[i].checked==false){mark = false}
}
if (mark){
for (var i=0; i checkboxs[i].checked = false;
}
}else{
for (var i=0; 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);
}
}
}

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

//-->

清空

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

复制所选 删除所选

全选 A1 A2 A3 A4 A5 A6 A7 A8 A9 A10 A11

复制所选 删除所选 提交

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="MSThemeCompatible" content="No"> <title>无标题文档</title> 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"> </style> </head> <body> <p id="defComP" onClick="hideDiv(this)"> 清空 </p> <p id="autoFillP"> Llinzzi Huanhuan Tom.com 超级长的长长长长长长 </p> <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">复制所选</td> <td width="537">删除所选</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" >全选</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">复制所选</td> <td width="537">删除所选</td> <td width="537">提交</td> <td width="38"> </td> </tr> </table></td> </tr> </table> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]