Javascript table row clone example

gistfile1.php

<table id="prejam_vendors">
	<thead>
		<tr>
			<th class="text_left">Vendor Name</th>
			<th class="text_left">Quote Date</th>
			<th class="text_left">Quote #</th>
			<th class="text_left">Description</th>
			<th class="text_left">Discount</th>
			<th class="text_left">Price Book</th>
			<th class="text_left">Quote Expiration Date</th>
			<th class="text_left">Notes</th>
			<th>&nbsp;</th>
		</tr>
	</thead>
	<tbody>
		<?php $indexes = !empty($this->data['PrejamForm']['vendor']['vendors']) ? array_keys($this->data['PrejamForm']['vendor']['vendors']) : array(0); ?>
		<?php foreach ($indexes as $key => $index) : ?>
			<tr>	
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.vendor_name", array('id' => false, 'class' => 'large'));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.quote_date", array('id' => false));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.quote_number", array('id' => false));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.description", array('id' => false));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.discount", array('id' => false));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.price_book", array('id' => false));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.quote_expiration_date", array('id' => false));?></td>
				<td class="text_left"><?php echo $this->Form->text("PrejamForm.vendor.vendors.$index.notes", array('id' => false, 'class' => 'large'));?></td>
				<td class="text_center">
					<?php if ($key == 0) : ?>
						<?php echo $this->Html->image('add.png', array('class' => 'vendor_add')); ?>
					<?php else : ?>
						<?php echo $this->Html->image('cross.png', array('class' => 'vendor_remove')); ?>
					<?php endif; ?>
				</td>
			</tr>
		<?php endforeach; ?>
	</tbody>
</table>
<script type="text/javascript" language="javascript">
	jQuery(function(){
		// Add vendor
		$('#prejam_vendors').delegate('img.vendor_add', 'click', function(){
			var parent = $(this).parents('tbody:first');
			var clone = parent.children(':last').clone();
			var index = parseInt(clone.find('input:first').attr('name').match(/\[([0-9]+)\]/)[1]) + 1;
			
			// Clear clone input values and update index
			clone.find('input, select').val('').each(function(){
				$(this).attr('name', $(this).attr('name').replace(/\[[0-9]+\]/, '[' + index + ']'));
			}).end().find('img.vendor_add').attr({
				'src' : '/img/cross.png',
				'class' : 'vendor_remove'
			}).end().appendTo(parent);
		});
		
		// Remove vendor
		$('#prejam_vendors').delegate('img.vendor_remove', 'click', function(){
			$(this).parents('tr:first').remove();
		});
	});
</script>