I wanted a quick easy way of adding rows to a table - preferably by designing the layout in html and then copying to where i needed it and changing the elements values where needed. This took me longer to figure out than it should have - so I thought I’d share it.

The snippet copies a row from one table and inserts it to the target table. 
<table id=“dataTable”>
</table>
<table id=“templateTable” cellspacing=“0” style=“display: none;”>
	<tr id=“templateRow”>
		<td id=“nameRow” class=“rowItem” width=“25%”>
			<a></a>
		</td>
		<td id=“positionRow” class=“rowItem” width=“60%”>
		</td>
		<td id=“numberRow” class=“rowItem” width=“15%”>
		</td>
	</tr>
</table>

<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.js”></script>
<script type=“text/javascript”>
(document).click(function() {
	addNewRow("mailto://johnny@here.com", "John Ryan", 	"Developer", "555 123456");
	addNewRow("mailto://johnny@here.com", "Bill Smith", 	"Developer", "555 768648");
	addNewRow("mailto://johnny@here.com", "Buck Rogers", 	"Developer", "555 675843");
	addNewRow("mailto://johnny@here.com", "Frank Wlliams", 	"Developer", "555 675843");
});

// Copy the template row and insert it to the target table.
function addNewRow(link, name, position,number){
var clonedRow = $('#templateRow').clone(true);
(“#nameRow a”, clonedRow).attr(“href”, link);
("#nameRow a", clonedRow).html(name);
(“#positionRow”, clonedRow).html(position);
("#numberRow", clonedRow).html(number);
(dataTable).append(clonedRow);
}
</script>