Using jQuery to add a templated row to a html table

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>