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>