javascript動的追加削除テーブルデータ管理

この記事では、Javascriptを使ってフォームデータ管理を動的に追加し、主に次のような機能を実現します.
追加ボタンをクリックして空のレコードを追加します.表のセルをクリックしてテキストを変更できます.修正して保存インターフェースを実現しました.新しいレコードを追加しても、何の変更もしていない場合はnullです.すべてを保存するときは無視されます.すべてを保存する時は修正した値だけを保存します.元のデータはもう繰り返し保存しません.更新時にデータが保存されていない場合は保存を促す.削除時に一時的に追加された無効なデータをクリックして直接削除します.保存したレコードがあれば、レコード削除のインターフェースができます.入れ子が多いことを考慮してフォームを使わず、伝えるべきデータをjsで直接解析して分離しました.
まず運転の効果図を見てください.

    
    
    
    

//<![CDATA[
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<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'){/*             ，         */
                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(){/*         */
        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<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.οnclick=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;/*            */
    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'));/*            ，       */
                td.appendChild(span);
                span.onclick =spanEvent;
            }
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    };
    var getAllData = function(){/*           */
        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(){/*              */
        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();
            }
        }
    };
};
window.onload = function(){
    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);
};
//]]>



    

        

            

                
A
                
B
                
C
                
D
                
  
            
            
            
        
        
        
        

            
Tip：
            

                
                     。
                
             。
                
           。
                
                   null，         。
                
             ，           。
                
               。
                
                      ，                   。