Using jQuery Table AddRow Plugin with Rating plugin

Description

Being asked by Rob Potschka on how to use jQuery Table AddRow Plugin with Chris Richards's Star Rating Plugin for jQuery, I would like to post the example code here, too.

The trick is that, each time the jQuery rating function is called, there will be a div layer generated to show the stars for selection. Thus, when the table addRow plugin is invoked, the table addRow plugin first clone all the objects in the tr. Then, we should remove the cloned div layer and apply the cloned select object with the rating function again. The following example shows how this can work.

Demonstration

<table>
<tr><td>
	<select class="rating" id="tmp"> 
	    <option value="0">Did not like</option>
	    <option value="1">Ok</option>
	    <option value="2" selected="selected">Liked</option>
	    <option value="3">Loved!</option>
	</select>
</td>
<td><input type="button" value="add" class="add"/>
<input type="button" value="delete" class="del"/>
</td>
</tr>
</table>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type='text/javascript' src='/js/jquery.rating.js'></script>
<script type="text/javascript" src="/js/jquery.table.addrow.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.rating.css" />
<script type="text/javascript">
(function($){
	$(document).ready(function(){
		$(".rating").rating();
		$(".add").btnAddRow(function(row){
			row.find("div.ui-rating").remove();
			row.find(".rating").rating();
		});
		$(".del").btnDelRow();
	})
})(jQuery);
</script>