【www.gdgbn.com--文本特效】

网页特效实现表格行增加删除修改

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




    model
   
   
   
<script type="text/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             if(this.data[j]!=="null"){/* 如果修改了单元格的默认值,这里也做相应修改 */
                tag=1;
                break;
            }
        }
        for(var k=0; k         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();
            }
        }
    };
};
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);
};
//]]>
</script>


   
       
           
                a
                b
                c
                d
                操作
           
           
           
       
       
       
       
           

tip:


           

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

本文来源:http://www.gdgbn.com/wangyetexiao/29214/