jQuery Table AddRow plugin

Description

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:

Update

2010-3-16: Being reported by Simon Wallmann, this plugin cannot work properly in 1.4.2. I have found similar cases in http://forum.jquery.com/topic/jquery-1-4-2-data-unexpected-behaviour and a ticket have been submitted to http://dev.jquery.com/ticket/6166 already. This problem will be fixed in 1.4.3 version. By the way, I've made the adaption to jQuery 1.4.2 before 1.4.3 is launched. If you are going to use jQuery 1.4.2, please make sure to use the latest version 1.02 of this plugin.

2010-3-5: Demonstration on using jQuery Table AddRow Plugin with Rating plugin.

2010-3-5: Demonstration on using jQuery Table AddRow Plugin with Autocomplete plugin

This plugin has been largely updated (adding a lot of parameters, and in the same time, keeping the support of old functionality) on February 19,2010 (Version 1.1). Since I am still busy with the daily job, I will summarize all the parameters later on. For those who want to use the old version (a lighter) please go to the download session for Version 1.0.

This plugin has been updated on October 23,2009 (Version 1.0), with the following enhancement:

1. For those platform that cannot handle multiple fields with single field name, I have added "inputBoxAutoNumber" parameter.
   • By setting "inputBoxAutoNumber" to true (i.e. $(".addRow").btnAddRow({inputBoxAutoNumber:true});),
   • all the <input> and <textarea> tags' name attribute will be changed automatically.
   • A row number (starting from 1) will be attached after the original name.
   • For example, <input type="text" name="data"/> will be automatically changed to <input type="text" name="data1"/> for the first row, <input type="text" name="data2"/> for the second row and so on.
2. A new parameter "displayRowCountTo" have been added to allow any <input> with the corresponding classname store the number of row value in it's value attribute. For instance,
• $(".addRow").btnAddRow({displayRowCountTo:"rowCount"});
• This instruction told the plugin to calculate the total number of row and store it in any input box with class name "rowCount"
3. Fix the bug in case similar to Example 1: the new "add" button's value will no longer be cleared.

This plugin has been updated on October 2, 2009, for the following modifications:

1. Add oddRowCSS and evenRowCSS to define the style in alternative rows inside the table. see #10
2. Remove the Delete button in last row when using autoAddRow function.

This plugin has been updated on September 29, 2009, for the following modifications:

1. Add rowNumColumn property, allowing you to define any column to show the row number. See #8
2. Add autoAddRow(), allowing any table expand automatically without pressing the add button. See #9
3. Clear textarea in the new row automatic.

This plugin has been updated on September 15, 2009, for the following modifications:

1. The Delete button will be display if there are more than one rows initially. Thanks for Jeff White for telling me this bug.
2. The Add Row button will be disabled automatically when the number of row reaches upper limit
3. Add ignoreClass parameters, see Example #5
4. Add call back function for further processing see Example #6
5. ** Add compatibility to other components (defaultText plugin, etc.) with data("init") function, see #7

Demonstration

Example #1

<table border="1">
<tr><td colspan="4">Enter Your Information</td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".addRow").btnAddRow();
		$(".delRow").btnDelRow();
});
})(jQuery);
</script>

Example #2

<table border="1">
<tr><td colspan="3">Enter Your Information
<input type="button" class="addRow" value="Add Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".addRow").btnAddRow();
		$(".delRow").btnDelRow();
});
})(jQuery);
</script>

Example #3

<table border="1">
<tr><td colspan="3">Enter Your Information</td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td colspan="3" align="right">
<input type="button" class="addRow" value="Add Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".addRow").btnAddRow();
		$(".delRow").btnDelRow();
});
})(jQuery);
</script>

Example #4

<table border="1">
<tr><td colspan="3">Enter Your Information (Max 3 Email)</td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td colspan="3" align="right">
<input type="button" class="addRow-Max3" value="Add Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".addRow-Max3").btnAddRow({maxRow:3});
		$(".delRow").btnDelRow();
	});
})(jQuery);
</script>

Example #5

<table border="1">
<tr><td>Name</td><td>Email</td><td>Comment</td></tr>
<tr><td class="noClone">John</td>
<td><input type="text" size="24" value="default1@email.com"/></td>
<td><textarea class="noClone">This is the first Email</textarea><input type="button" class="delRow" value="Delete Row" /></td></tr>
<tr><td class="noClone">Mary</td>
<td><input type="text" size="24"  value="default2@email.com"/></td>
<td><textarea class="noClone">This is the second Email</textarea><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td colspan="3" align="right"><input type="button" class="addRow-ignoreClass" value="Add Row"/></td></tr>
</table><script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".addRow-ignoreClass").btnAddRow({maxRow:5,ignoreClass:"noClone"});
		$(".delRow").btnDelRow();
	});
})(jQuery);
</script>

Example #6

<table border="1">
<tr><td colspan="3">Enter Your Email (Max 3 rows)</td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24"/></td>
<td><input type="button" class="delRow-callBack" value="Delete Row"/></td></tr>
<tr><td colspan="3" align="right"><input type="button" class="addRow-callBack" value="Add Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".delRow-callBack").btnDelRow(function(row){
			if(row) alert(row.html());
		});
		$(".addRow-callBack").btnAddRow({maxRow:3},function(row){
			if(row) alert(row.html());
		});
	});
})(jQuery);
</script>

Example #7 : Mixing with defaultText plugin

<table border="1">
<tr><td colspan="4">Enter Your Information</td></tr>
<tr><td>Email</td><td><input type="text" size="24" class="useDefault" rel="Enter your Email here."/></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
<tr><td>Email</td><td><input type="text" size="24" class="useDefault" rel="Enter your Email here."/></td>
<td><input type="button" class="addRow" value="Add Row"/></td>
<td><input type="button" class="delRow" value="Delete Row"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.defaultText.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	$(".useDefault").addDefaultText();
	$(".addRow").btnAddRow();
	$(".delRow").btnDelRow();
});
</script>

Example #8 : define any column to show the row number

<table border="1">
<tr><th>#</th><th>Your comment</th>
<th><input type="button" class="addComment" value="Add More Comment"/></th></tr>
<tr><td>Comment #<span class="rowNumber">1</span></td><td><textarea></textarea></td>
<td> <input type="button" class="delRow" value="Remove"/></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.defaultText.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	$(".addComment").btnAddRow({rowNumColumn:"rowNumber"});
	$(".delRow").btnDelRow();
});
</script>

Example #9 : Auto-expand row without pressing the add button

<table border="1" class="autoTable">
<tr><td>Your Name</td>
<td>Your Age</td><td> </td></tr>
<tr><td><input type="text" size="25"/></td>
<td><input type="text" size="25"/></td><td><input type="button" value="Delete" class="delRow"/><</td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	$(".autoTable").tableAutoAddRow({autoAddRow:true});
	$(".delRow").btnDelRow();
});
</script>

Example #10 : Alternative Row Style

Input your data
Your Data
Your Data

<style>
.atable{
	border-collapse:collapse;
	border:1px solid #AAA;
	margin-left:10px;
}
.atable th{
	border:1px solid #AAF;
	background:#BFBFFF;
	font-weight:bold;
}
.atable td{
	padding:4px;
	border:1px solid #AAF;
}
.oddRow{
	background:#FFFFFF;
}
.evenRow{
	background:#DFDFFF;
}
</style>
<table border="1" class="atable">
<tr><th colspan="2">Input your data</th>
<th><input type="button" value="Add Row" class="alternativeRow"/></th></tr>
<tr><td>Your Data</td><td><input type="text" size="25"/></td>
<td><img src="/images/cross.gif" class="delRow" border="0"></td></tr>
<tr><td>Your Data</td><td><input type="text" size="25"/></td>
<td><img src="/images/cross.gif" class="delRow" border="0"></td></tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	$(".alternativeRow").btnAddRow({oddRowCSS:"oddRow",evenRowCSS:"evenRow"});
	$(".delRow").btnDelRow();
});
</script>

jQuery Plugin Source Code

The following is the source code of the jQuery Plugin.

<script type="text/javascript">
(function($){if(typeof $.fn.btnAddRow== "undefined"){
	var ExpandableTableList=[],className="ExpandableTable";
	function ExpandableTable(target,maxRow){
		if(target) this.init(target,maxRow);
	}
	ExpandableTable.prototype.init=function(target,maxRow){
		ExpandableTableList.push(this);
		this.target=$(target).data(className,this);
		this.maxRow=maxRow;
		this.seed=Math.round(Math.random()*10000);
		this.onAddRow=[];
		return this
	};
	ExpandableTable.prototype.live=function(){
		if (!this.goLive){
			var t=this;
			this.update();
			$(".addRow"+this.seed)
			.live("click",function(){
				var newRow=t.addRow();
			});
			$(".delRow"+this.seed)
			.live("click",function(){
				var oj=$(this).closest("."+t.cloneClass),
				o=oj.clone();
				oj.hide().find("*").each(function(i,v){
					if($(v).data("destroy"));
					for(var k in $(v).data("destroy")){
						$(v).data("destroy")[k](v);
					}
				});
				oj.remove();
				$(".addRow"+t.seed)
				.attr("disabled",false);
				t.update();
				if(t.deleteCallBack && $.isFunction(t.deleteCallBack)) 
					t.deleteCallBack(o);
			});
			$(".autoAdd"+this.seed)
			.live("keyup",function(){
				if((this.nodeName.toLowerCase()=="textarea" && $(this).html()!="") ||
				(this.nodeName.toLowerCase()=="textarea" && $(this).val()!="") ||
				(this.nodeName.toLowerCase()=="input" && $(this).val()!="")) t.addRow();
			});
			this.goLive=true;
		}
		return this
	};
	ExpandableTable.prototype.updateRowNumber=function(){
		var t=this;
		if(t.rowNumColumn){
			$("."+t.cloneClass,t.target).each(function(j,u){
				var n=j+1;
				$("."+t.rowNumColumn,$(u)).each(function(i,v){
					if($(v).is(":text, textarea")) 
						$(v).val(n);
					else
						$(v).text(n);
				});
			});
		}
		return t
	};
	ExpandableTable.prototype.updateInputBoxName=function(){
		$("."+this.cloneClass,this.target).each(function(j,t){
			var n=j+1;
			$("input,textarea",$(t)).each(function(i,v){
				if($(v).attr("name")!=""){
					var newName=$(v).attr("name").replace(/\d+$/,"")+n;
					$(v).attr("name",newName);
				}
			});
		});
		return this
	};
	ExpandableTable.prototype.updateInputBoxId=function(){
		var t=this;
		$("."+t.cloneClass,this.target).each(function(j,u){
			var n=j+1;
			$("input,textarea",$(u)).each(function(i,v){
				if($(v).attr("id")!=""){
					var newId=$(v).attr("id").replace(/\d+$/,"")+n;
					$(v).removeAttr("id").attr("id",newId);
				}
			});
		});
		return this
	};
	ExpandableTable.prototype.updateOddRowCSS=function(){
		if(this.oddRowCSS){
			this.target.find("."+this.oddRowCSS).removeClass(this.oddRowCSS);
			this.target.find("tr:odd").addClass(this.oddRowCSS);
		}
		return this
	};
	ExpandableTable.prototype.updateEvenRowCSS=function(){
		if(this.evenRowCSS){
			this.target.find("."+this.evenRowCSS).removeClass(this.evenRowCSS);
			this.target.find("tr:even").addClass(this.evenRowCSS);
		}
		return this
	};
	ExpandableTable.prototype.updateRowCount=function(){
		if(this.displayRowCountTo){
			var count=$("."+this.cloneClass,this.target).size();
			$("."+this.displayRowCountTo,this.target).each(function(i,v){
				var nn=v.nodeName.toLowerCase();
				if(nn=="input" || nn=="textarea") 
					$(v).val(count);
				else
					$(v).html(count);
			});
		}
		return this
	};
	ExpandableTable.prototype.update=function(){
		var t=this;
		this.delRowButtons=$(".delRow"+this.seed,this.target);
		if(this.delRowButtons.size()==1)
			this.delRowButtons.hide();
		else {
			if(this.autoAddRow)
				this.delRowButtons.not(":last").show();
			else
				this.delRowButtons.show();
		}
		if(this.autoAddRow) {
			this.target.find(".autoAdd"+this.seed).removeClass("autoAdd"+t.seed);
			this.target
			.find("."+t.cloneClass+":last")
			.find("input,textarea")
			.addClass("autoAdd"+this.seed);
		}
		if(this.inputBoxAutoNumber) {
			this.updateInputBoxName();
			this.updateInputBoxId();
		}
		if(this.inputBoxAutoId) {
			this.updateInputBoxId();
		}
		if(this.hideFirstOnly && this.hideFirstOnly!=""){
			$("."+this.cloneClass).eq(0).find("."+this.hideFirstOnly).hide();
			$("."+this.cloneClass).not(":first").find("."+this.hideFirstOnly).show();
		}
		if(this.showFirstOnly && this.showFirstOnly!=""){
			$("."+this.cloneClass).eq(0).find("."+this.showFirstOnly).show();
			$("."+this.cloneClass).not(":first").find("."+this.showFirstOnly).hide();
		}
		this.updateRowNumber()
		.updateOddRowCSS()
		.updateEvenRowCSS()
		.updateRowCount();
		return this
	};
	ExpandableTable.prototype.addRow=function(){
		var newRow;
		if(!this.maxRow || (this.maxRow && $("."+this.cloneClass).size()<this.maxRow)){
			this.delRowButtons.show();
			var lastRow=$("."+this.cloneClass+":last",this.target);
			this.newRow=newRow=lastRow.clone();
			newRow.find("input:text").val("");
			newRow.find("textarea").text("");
			if(this.autoAddRow) newRow.find("."+this.cloneClass).hide();
			newRow.insertAfter(lastRow);
			if(this.ignoreClass && this.ignoreClass!=""){
				newRow.find("."+this.ignoreClass).each(function(){
					if(this.nodeName.toLowerCase()=="input" &&
						($(this).attr("type").toLowerCase()=="text"
						|| $(this).attr("type").toLowerCase()=="hidden"
					)) $(this).val("");
					else if(this.nodeName.toLowerCase()=="td") $(this).html(" ");
					else if($(this).html()!="") $(this).text("");
				});
			}
			newRow.find("input:hidden").not("."+this.cloneClass).val("");
			if(this.hideFirstOnly && this.hideFirstOnly!=""){
				newRow.find("."+this.hideFirstOnly).show();
			}
			if(this.showFirstOnly && this.showFirstOnly!=""){
				newRow.find("."+this.hideFirstOnly).hide();
			}
			if(this.maxRow && $("."+this.cloneClass).size()>=this.maxRow) 
				$(".addRow"+this.seed).attr("disabled",true);
			this.target.find("."+this.cloneClass+":first").closest("tr").find("*")
			.each(function(i,v){
				if($(this).data("init")) {
					var jObj=newRow.find("*").eq(i),obj=jObj[0];
					jObj.data("init",{});
					for(var k in $(this).data("init")){
						jObj.data("init")[k]=$(this).data("init")[k];
						jObj.data("init")[k](obj);
					}
				}
			});
			this.update();
		}
		if(this.addCallBack && $.isFunction(this.addCallBack))
			this.addCallBack(newRow);
		return newRow
	};
	$.fn.btnAddRow=$.fn.tableAutoAddRow=function(options,func){
		var callBack;
		if (typeof options=="object")
			callBack=(func && $.isFunction(func)) ? func :null; 
		else
			callBack=(options && $.isFunction(options)) ? options :null; 
		options=$.extend({
			maxRow:null,
			ignoreClass:null,
			rowNumColumn:null,
			autoAddRow:false,
			oddRowCSS:null,
			evenRowCSS:null,
			inputBoxAutoNumber:false,
			inputBoxAutoId:false,
			displayRowCountTo:null,
			maxRowAttr:null,
			hideFirstOnly:null,
			showFirstOnly:null,
			cloneClass:null,
			evenRowAttr:null,
			oddRowAttr:null,
			rowCountAttr:null,
			autoNumAttr:null,
			autoIdAttr:null
		},options);
		this.each(function(){
			var tbl,etbl,cloneClass;
			if(typeof options.cloneClass=="string" && options.cloneClass!=""){
				if ($(this).closest("table").find("."+options.cloneClass).size()>0){
					tbl=$(this).closest("table");
					cloneClass=options.cloneClass;
				}else if ($(this).closest("."+options.cloneClass).size()>0){
					tbl=$(this).closest("."+options.cloneClass).closest("table");
					cloneClass=options.cloneClass;
				} else{
					tbl=(this.nodeName.toLowerCase()=="table")?$(this):$(this).closest("table");
				}
			}else{
				tbl=(this.nodeName.toLowerCase()=="table")?$(this):$(this).closest("table");
			}
			if(options.maxRowAttr && typeof $(this).attr(options.maxRowAttr)!="undefined") 
				options.maxRow=$(this).attr(options.maxRowAttr);
			if(options.oddRowAttr && typeof $(this).attr(options.oddRowAttr)!="undefined")
				options.oddRowCSS=$(this).attr(options.oddRowAttr);
			if(options.evenRowAttr && typeof $(this).attr(options.evenRowAttr)!="undefined")
				options.evenRowCSS=$(this).attr(options.evenRowAttr);
			if(options.rowCountAttr && typeof $(this).attr(options.rowCountAttr)!="undefined")
				options.displayRowCountTo=$(this).attr(options.rowCountAttr);
			if(options.autoNumAttr && typeof $(this).attr(options.autoNumAttr)!="undefined")
				options.inputBoxAutoNumber=$(this).attr(options.autoNumAttr);
			if(options.autoIdAttr && typeof $(this).attr(options.autoIdAttr)!="undefined")
				options.inputBoxAutoId=$(this).attr(options.autoIdAttr);
			if(tbl.size()>0){
				if(typeof tbl.data(className)==="undefined" || tbl.data(className)===null){
					etbl=new ExpandableTable(tbl,options.maxRow);
					if(this.nodeName.toLowerCase()!="table")
						$(this)
							.addClass("addRow"+etbl.seed)
							.data(className,etbl);
				}else{
					if(this.nodeName.toLowerCase()!="table")
						$(this)
							.addClass("addRow"+tbl.data(className).seed)
							.data(className,tbl.data(className));
				}
				if($(this).data(className)) {
					etbl=$(this).data(className);
				} 
				etbl.maxRow=options.maxRow;
				etbl.maxRow=options.maxRow;
				etbl.ignoreClass=options.ignoreClass;
				etbl.rowNumColumn=options.rowNumColumn;
				etbl.oddRowCSS=options.oddRowCSS;
				etbl.evenRowCSS=options.evenRowCSS;
				etbl.autoAddRow=options.autoAddRow;
				etbl.inputBoxAutoNumber=options.inputBoxAutoNumber;
				etbl.displayRowCountTo=options.displayRowCountTo;
				etbl.hideFirstOnly=options.hideFirstOnly;
				etbl.showFirstOnly=options.showFirstOnly;
				if(typeof cloneClass=="string" && etbl.cloneClass!=cloneClass){
					etbl.cloneClass=cloneClass;
				} else {
					etbl.cloneClass="cloneRow"+etbl.seed;
				}
				etbl.updateRowCount();
				etbl.addCallBack=callBack;
			};
		});
		for(var i=0;i<ExpandableTableList.length;i++){
			if(!ExpandableTableList[i].goLive){
				ExpandableTableList[i].live();
			}
		}
	};
	$.fn.btnDelRow=function(options,func){
		var callBack;
		if (typeof options=="object")
			callBack=(func && $.isFunction(func)) ? func :null; 
		else
			callBack=(options && $.isFunction(options)) ? options :null; 
		options=$.extend({
			cloneClass:null
		},options);
		
		this.each(function(){
			var etbl,tbl,cloneClass;
			if ($(this).closest("."+options.cloneClass).size()>0){
				tbl=$(this).closest("."+options.cloneClass).closest("table");
				cloneClass=options.cloneClass;
			}else{
				tbl=$(this).hide().closest("table");
			}
			if(tbl.size()>0){
				if(typeof tbl.data(className)==="undefined" || tbl.data(className)===null){
					etbl=new ExpandableTable(tbl);
					$(this)
						.addClass("delRow"+etbl.seed)
						.data(className,etbl);
				}else{
					$(this)
						.addClass("delRow"+tbl.data(className).seed)
						.data(className,tbl.data(className));
				}
				if($(this).data(className)) {
					etbl=$(this).data(className);
					etbl.deleteCallBack=callBack;
				} 
				if(!(typeof etbl.cloneClass=="string" 
					&& etbl.cloneClass!="")){
					etbl.cloneClass="cloneRow"+etbl.seed;
					$(this).closest("tr").addClass("cloneRow"+etbl.seed);
				} else if(typeof cloneClass=="string"){
					etbl.cloneClass=cloneClass;
				} else {
					etbl.cloneClass="cloneRow"+etbl.seed;
					$(this).closest("tr").addClass("cloneRow"+etbl.seed);
				}
				etbl.update();
			}
		});
		for(var i=0;i<ExpandableTableList.length;i++){
			if(!ExpandableTableList[i].goLive){
				ExpandableTableList[i].live();
			}
		}
	};
}})(jQuery);
</script>

Download the plugin

You can download the plugin from the latest versions in the following links:

1. Version 1.02 (latest) source code
2. Version 1.01 (latest) source code
3. Version 1.0 old source code

Copyright and licensing

All the plugin source codes and the examples are copyright of C. F., Wong
Please feel free to use any code listed in this page, they are licensed under the MIT License:
http://www.opensource.org/licenses/mit-license.php