智能表格 - 站长资源库


答案：作者 llinzzi 
版本 0.9 
说明: 
当焦点不在表格内的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("divShowInp
上一个：图片从右至左滚动JS
下一个：如何用javascript判断录入的日期是否合法
更多图片编程知识: