<script type="text/javascript" src="http://ajax.googleapis.

com/ajax/libs/jquery/
1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#addPackage').click(AddPackage);
});
function AddPackage() {
var packageID = 'package' + $('#myDiv table').length;
var table = $('<table>');
table.attr('id',packageID);
var columns = {'Items':{'name':'item','type':'static'},'Price (per item)':{'na
me':'price','type':'static'},'Comments':{'name':'comments','type':'input'},'Quan
tity':{'name':'quantity','type':'input'},'Subtotal':{'name':'subtotal','type':'s
tatic'},'Discount (20%)':{'name':'discount','type':'static'},'Total':{'name':'to
tal','type':'static'}};
var header = $('<th>');
header.append($('<td>')); // This is the 'empty' column where the add/delete i
cons go
for (i in columns) // Loop thru our columns collection and add each one to the
header row
header.append($('<td>').html(i));
table.append(header);
var row = $('<tr>'); // The first row of the table
var td = $('<td>'); // The add/delete column icon
var delIcon = $('<img>').attr('src','path/to/delete.gif').click(DeleteRow);
row.append(td.append(delIcon));
for (i in columns)
{
var td = $('<td>');
switch (columns[i].type )
{
case 'static': // Add a span to the cell to be updated
td.append($('<span>').attr('id', packageID + '_row0_' + columns[i].name)
);
break;
case 'input': // Add a user input field to the cell
td.append($('<input>').attr({'type':'text','id':packageID + '_row0_' + c
olumns[i].name}));
break;
}
row.append(td);
}
table.append(row);
var footer = $('<tr>');
var addIcon = $('<img>').attr('src','path/to/add.gif').click(AddRow);
footer.append($('<td>').append(addIcon));
for (i in columns)
footer.append($('<td>'));
table.append(footer);
table.appendTo('#myDiv');
return false; // Return false so the link doesn't try to go anywhere
}
function AddRow()
{
 if ($(this).parents('table').find('tr').length == 2 && $(this).parents('table
tr td:first').is(':hidden')) { // 2 becase we've got the footer row
$(this).parents('tr:first').show();
} else {
var newRow = $(this).parents('table tr:first').clone(true).insertBefore($(th
is).parents('tr:first'));
}
}
function DeleteRow()
{
if ($(this).parents('table').find('tr').length == 2) { // 2 becase we've got t
he footer row
$(this).parents('tr:first').hide().find('input').val('');
} else {
$(this).parents('tr:first').remove();
}
}
</script>
<div id="myDiv"></div>
<a href="#" id="addPackage">Add Package</a>