|
|
|
jQuery Table AddRow Plugin
1
Cloudgen
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>




There are currently no comments for this snippet.