jQuery Table AddRow Plugin





1
Date Submitted Sat. Aug. 22nd, 2009 12:07 PM
Revision 1 of 1
Scripter Cloudgen
Tags Add-Row | AddRow | Delete-Row | jquery | plugin | Table
Comments 0 comments
If you have ever designed a form allowing user entering more than one email? This plugin should help you. It provides the function for adding the add row and delete row dynamicly inside a table, seeTable addRow plugin

<script type="text/javascript">
(function($){
        var ExpandableTableList=[];
        function ExpandableTable(target,maxRow){
                if(target) this.init(target,maxRow);
        }
        ExpandableTable.prototype.init=function(target,maxRow){
                ExpandableTableList.push(this);
                this.target=$(target).data("ExpandableTable",this);
                this.maxRow=maxRow;
                this.seed=Math.round(Math.random()*10000);
                return this
        };
        ExpandableTable.prototype.live=function(){
                if (!this.goLive){
                        var t=this;
                        $(".addRow"+this.seed).live("click",function(){
                                t.addRow().update();
                        });
                        $(".delRow"+this.seed).live("click",function(){
                                $(this).closest("tr").remove();
                                t.update();
                        });
                        this.update();
                        this.goLive=true;
                }
                return this
        };
        ExpandableTable.prototype.update=function(){
                this.delRowButtons=$(".delRow"+this.seed,this.target);
                if(this.delRowButtons.size()==1) this.delRowButtons.hide();
                return this
        };
        ExpandableTable.prototype.addRow=function(){
                if(!this.maxRow || (this.maxRow && $(".delRow"+this.seed).size()<this.maxRow)){
                        this.delRowButtons.show();
                        var lastRow=$(".delRow"+this.seed+":last",this.target).closest("tr");
                        var newRow=lastRow.clone()
                                .insertAfter(lastRow)
                                .find("input:text").val("");
                }
                return this
        };
        $.fn.btnAddRow=function(options){
                var maxrow=(options && typeof options.maxRow!="undefined")?options.maxRow:null;
                this.each(function(){
                        var tbl=$(this).closest("table");
                        if(tbl.size()>0){
                                if(typeof tbl.data("ExpandableTable")==="undefined"){
                                        var etbl=new ExpandableTable(tbl,maxrow);
                                        $(this)
                                                .addClass("addRow"+etbl.seed)
                                                .data("ExpandableTable",etbl);
                                }else{
                                        $(this)
                                                .addClass("addRow"+tbl.data("ExpandableTable").seed)
                                                .data("ExpandableTable",tbl.data("ExpandableTable"));
                                }
                        };
                });
        };
        $.fn.btnDelRow=function(options){
                var maxrow=(options && typeof options.maxRow!="undefined")?options.maxRow:null;
                this.each(function(){
                        var tbl=$(this).closest("table");
                        if(tbl.size()>0){
                                if(typeof tbl.data("ExpandableTable")==="undefined"){
                                        var etbl=new ExpandableTable(tbl,maxrow);
                                        $(this)
                                                .addClass("delRow"+etbl.seed);
                                }else
                                        $(this)
                                                .addClass("delRow"+tbl.data("ExpandableTable").seed)
                               
                        }
                });
                for(var i in ExpandableTableList)
                        if(!ExpandableTableList[i].goLive)
                                ExpandableTableList[i].live();
        };
})(jQuery);
</script>

 

Comments

There are currently no comments for this snippet.

Voting

Votes Up


Scripter Cloudgen

Votes Down