用JavaScript 实现表格数据管理

　　用JavaScript 实现了表格数据管理的以下几个功能：

• · 点击添加按钮可以添加一个空的可以修改的记录  。
• · 点击表格单元格可以修改文本  。
• · 修改后实现了保存的接口  。
• · 如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略  。
• · 保存全部时只保存修改过的值，原有的数据不再重复保存  。
• · 刷新时如果数据未保存则提示保存  。
• · 点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口  。

　　考虑到嵌套的比较多就没有使用form表单，用JavaScript 直接解析dom来分离出了要传递的数据  。

　　先看下运行的效果图：

　　JavaScript 的代码如下，其中注释较多就不解释了：

var JCRUD=function(tb,colnum,saveAllBtn,add,ajaxSaver,allAjaxSaver,ajaxDeler){  
    var del = tb.getElementsByTagName(a);  
    var span = tb.getElementsByTagName(span);  
    var ctr=[];/* 保存修改的tr对象 */ 
    var delEvent = function(){  
        var dder = this.parentNode.parentNode;  
        this.data=[];  
        for(var i=0; i
            this.data[i] = dder.children[i].children[0].firstChild.nodeValue;  
        var tag = 0;  
        for(var j=0; j<this.data.length; j++){  
            if(this.data[j]!==null){/* 如果修改了单元格的默认值，这里也做相应修改 */ 
                tag=1;  
                break;  
            }  
        }  
        for(var k=0; kif(ctr[k]===dder) ctr.splice(k,1);  
        dder.parentNode.removeChild(dder);  
        if(tag==1) ajaxDeler.call(this);  
    };  
    var spanEvent = function(){/* 点击生成修改框 */ 
        var value = this.firstChild.nodeValue;  
        var input = document.createElement(input);  
        input.value = value;  
        this.parentNode.appendChild(input);  
        this.parentNode.removeChild(this);  
        input.focus();  
        input.onblur = function(){/* 失去焦点移除修改框 */ 
            var span = document.createElement(span);  
            span.appendChild(document.createTextNode(this.value?this.value:null));
/* 如果修改了单元格的默认值，这里也做相应修改 */ 
            span.onclick =spanEvent;  
            this.parentNode.appendChild(span);  
            this.parentNode.removeChild(this);  
            if(value!=this.value){/* 如果内容改变生成保存按钮 */ 
                var tr = span.parentNode.parentNode  
                    tds = tr.children;  
                    btns = tds[colnum-1].getElementsByTagName(a);  
                for(var i=0; i
                    if(btns[i].firstChild.nodeValue!=保存){  
                        var saver = document.createElement(a);  
                        saver.href="javascript:;";  
                        saver.appendChild(document.createTextNode(保存));  
                    }else{  
                        var saver = btns[i];  
                    }  
                }  
                tds[tds.length-1].appendChild(saver);  
                var tag=0;  
                for(var k=0; k
                    if(ctr[k]===tr) tag=1;  
                if(tag==-0) ctr.push(tr);  
                saver.onclick=function(){/* 添加保存处理事件 */ 
                    this.data = [];  
                    for(var i=0; i
                        this.data[i] = 
this.parentNode.parentNode.children[i].children[0].firstChild.nodeValue;  
                    ajaxSaver.call(this);  
                    for(var i=ctr.length-1; i>=0; i--){  
                        if(this.parentNode.parentNode===ctr[i]){  
                            ctr.splice(i,1);  
                        }  
                    }  
                    this.parentNode.removeChild(this);  
                };  
            }  
        }  
    };  
    for(var i in del) del[i].onclick = delEvent;
/* 给现在有元素添加事件 */ 
    for(var j in span) span[j].onclick = spanEvent;  
    add.onclick = function(){  
        var tbody = tb.children[0];  
        var tr = document.createElement(tr);  
        for(var j=0; j
            var td = document.createElement(td);  
            if(j==(colnum-1)){  
                var del = document.createElement(a);  
                del.href=javascript:;;  
                del.appendChild(document.createTextNode(删除));  
                del.onclick = delEvent;/* 给新加元素添加事件 */ 
                td.appendChild(del);  
            }else{  
                var span = document.createElement(span);  
                span.appendChild(document.createTextNode(null));
/* 如果在添加时修改默认值，在这里修改的 */ 
                td.appendChild(span);  
                span.onclick =spanEvent;  
            }  
            tr.appendChild(td);  
        }  
        tbody.appendChild(tr);  
    };  
    var getAllData = function(){/* 保存全部的数据解析 */ 
        var allData=[];  
        for(var i=0; i
            allData[i]=[];  
            for(var j=0; j
                allData[i].push(ctr[i].children[j].children[0].firstChild.nodeValue);  
            ctr[i].children[colnum-1].removeChild(ctr[i].children[colnum-1].children[1]);  
        }  
        ctr=[];  
        return allData;  
    };  
    saveAllBtn.onclick = function(){/* 添加保存全部数据保存事件 */ 
        this.allData = getAllData();  
        if(this.allData.length){  
            allAjaxSaver.call(this);  
        }else{  
            alert(No data!);  
        }  
    };  
    window.onbeforeunload = function(){/* 刷新提示保存数据 */ 
        if(ctr.length){  
            var y = confirm(数据还未保存，是否保存数据？)  
            if(y){  
                saveAllBtn.click();  
            }  
        }  
    };  
}; 

　　调用时要传几个参数，有几个参数为函数，每个参数都有注释，调用代码如下：

var table = document.getElementById(tb),/* 要操作的表格 */ 
    colnum = 5,/* 这里修改表格的列数 */ 
    saveAllBtn = document.getElementById(SaveAll),/* 保存全部的按钮 */ 
    addBtn = document.getElementById(Add),/* 添加的按钮 */ 
    saver = function(){  
        /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */ 
        alert(要传的数据为data数据："+this.data+"此处调用ajax实现后台保存！实现略……);  
    },  
    allSaver = function(){  
        /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */ 
        alert(要传的数据为allDtat数组："+this.allData+"此处调用ajax实现后台保存！实现略……);  
    },  
    deler = function(){  
        /* 此处可以加上ajax效果与数据库交互 data是个数组，需要可以改成JSON */ 
        alert(要传的数据为data数据："+this.data+"此处调用ajax实现后台删除！实现略……);  
    };  
window.JCRUD(table,colnum,saveAllBtn,addBtn,saver,allSaver,deler); 

　　可以看出saver、allSaver、deler都是需要自己实现的，这与后台的实现相关，与本例子也没有主要关系也就不实现了，只把要传的数据传过来供使用  。

　　原文链接：http://www.cnblogs.com/jaiho/archive/2011/02/20/table_manager.html