用JavaScript 實(shí)現(xiàn)了表格數(shù)據(jù)管理的以下幾個(gè)功能：

• · 點(diǎn)擊添加按鈕可以添加一個(gè)空的可以修改的記錄。
• · 點(diǎn)擊表格單元格可以修改文本。
• · 修改后實(shí)現(xiàn)了保存的接口。
• · 如果添加了新的記錄而未做任何修改值都為null，保存全部時(shí)將被忽略。
• · 保存全部時(shí)只保存修改過(guò)的值，原有的數(shù)據(jù)不再重復(fù)保存。
• · 刷新時(shí)如果數(shù)據(jù)未保存則提示保存。
• · 點(diǎn)擊刪除時(shí)如果是臨時(shí)添加的無(wú)效數(shù)據(jù)則直接刪除，如果保存過(guò)的記錄則實(shí)現(xiàn)了記錄刪除的接口。

考慮到嵌套的比較多就沒(méi)有使用form表單，用JavaScript 直接解析dom來(lái)分離出了要傳遞的數(shù)據(jù)。

先看下運(yùn)行的效果圖：

JavaScript 的代碼如下，其中注釋較多就不解釋了：

var JCRUD=function(tb,colnum,saveAllBtn,add,ajaxSaver,allAjaxSaver,ajaxDeler){  
    var del = tb.getElementsByTagName('a');  
    var span = tb.getElementsByTagName('span');  
    var ctr=[];/* 保存修改的tr對(duì)象 */ 
    var delEvent = function(){  
        var dder = this.parentNode.parentNode;  
        this.data=[];  
        for(var i=0; i<dder.children.length-1; 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'){/* 如果修改了單元格的默認(rèn)值，這里也做相應(yīng)修改 */ 
                tag=1;  
                break;  
            }  
        }  
        for(var k=0; k<ctr.length; k++) if(ctr[k]===dder) ctr.splice(k,1);  
        dder.parentNode.removeChild(dder);  
        if(tag==1) ajaxDeler.call(this);  
    };  
    var spanEvent = function(){/* 點(diǎn)擊生成修改框 */ 
        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(){/* 失去焦點(diǎn)移除修改框 */ 
            var span = document.createElement('span');  
            span.appendChild(document.createTextNode(this.value?this.value:'null'));
/* 如果修改了單元格的默認(rèn)值，這里也做相應(yīng)修改 */ 
            span.onclick =spanEvent;  
            this.parentNode.appendChild(span);  
            this.parentNode.removeChild(this);  
            if(value!=this.value){/* 如果內(nèi)容改變生成保存按鈕 */ 
                var tr = span.parentNode.parentNode  
                    tds = tr.children;  
                    btns = tds[colnum-1].getElementsByTagName('a');  
                for(var i=0; i<btns.length; 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<ctr.length; k++)  
                    if(ctr[k]===tr) tag=1;  
                if(tag==-0) ctr.push(tr);  
                saver.onclick=function(){/* 添加保存處理事件 */ 
                    this.data = [];  
                    for(var i=0; i<tds.length-1; 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;
/* 給現(xiàn)在有元素添加事件 */ 
    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<colnum; 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'));
/* 如果在添加時(shí)修改默認(rèn)值，在這里修改的 */ 
                td.appendChild(span);  
                span.onclick =spanEvent;  
            }  
            tr.appendChild(td);  
        }  
        tbody.appendChild(tr);  
    };  
    var getAllData = function(){/* 保存全部的數(shù)據(jù)解析 */ 
        var allData=[];  
        for(var i=0; i<ctr.length; i++){  
            allData[i]=[];  
            for(var j=0; j<ctr[i].children.length-1; 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(){/* 添加保存全部數(shù)據(jù)保存事件 */ 
        this.allData = getAllData();  
        if(this.allData.length){  
            allAjaxSaver.call(this);  
        }else{  
            alert('No data!');  
        }  
    };  
    window.onbeforeunload = function(){/* 刷新提示保存數(shù)據(jù) */ 
        if(ctr.length){  
            var y = confirm('數(shù)據(jù)還未保存，是否保存數(shù)據(jù)？')  
            if(y){  
                saveAllBtn.click();  
            }  
        }  
    };  
}; 

調(diào)用時(shí)要傳幾個(gè)參數(shù)，有幾個(gè)參數(shù)為函數(shù)，每個(gè)參數(shù)都有注釋，調(diào)用代碼如下：

var table = document.getElementById('tb'),/* 要操作的表格 */ 
    colnum = 5,/* 這里修改表格的列數(shù) */ 
    saveAllBtn = document.getElementById('SaveAll'),/* 保存全部的按鈕 */ 
    addBtn = document.getElementById('Add'),/* 添加的按鈕 */ 
    saver = function(){  
        /* 此處可以加上ajax效果與數(shù)據(jù)庫(kù)交互 data是個(gè)數(shù)組，需要可以改成JSON */ 
        alert('要傳的數(shù)據(jù)為data數(shù)據(jù)："'+this.data+'"此處調(diào)用ajax實(shí)現(xiàn)后臺(tái)保存！實(shí)現(xiàn)略……');  
    },  
    allSaver = function(){  
        /* 此處可以加上ajax效果與數(shù)據(jù)庫(kù)交互 data是個(gè)數(shù)組，需要可以改成JSON */ 
        alert('要傳的數(shù)據(jù)為allDtat數(shù)組："'+this.allData+'"此處調(diào)用ajax實(shí)現(xiàn)后臺(tái)保存！實(shí)現(xiàn)略……');  
    },  
    deler = function(){  
        /* 此處可以加上ajax效果與數(shù)據(jù)庫(kù)交互 data是個(gè)數(shù)組，需要可以改成JSON */ 
        alert('要傳的數(shù)據(jù)為data數(shù)據(jù)："'+this.data+'"此處調(diào)用ajax實(shí)現(xiàn)后臺(tái)刪除！實(shí)現(xiàn)略……');  
    };  
window.JCRUD(table,colnum,saveAllBtn,addBtn,saver,allSaver,deler); 

可以看出saver、allSaver、deler都是需要自己實(shí)現(xiàn)的，這與后臺(tái)的實(shí)現(xiàn)相關(guān)，與本例子也沒(méi)有主要關(guān)系也就不實(shí)現(xiàn)了，只把要傳的數(shù)據(jù)傳過(guò)來(lái)供使用。

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

【編輯推薦】

1. 黑客調(diào)查：***JavaScript庫(kù)是什么?
2. JavaScript版幾種常見排序算法分享
3. JavaScript對(duì)象及繼承教程之內(nèi)置對(duì)象
4. JavaScript內(nèi)存回收機(jī)制深入解讀
5. JavaScript懶加載技術(shù)(lazyload)簡(jiǎn)單實(shí)現(xiàn)