When the user presses the text "Add", then I'd like to create a new row with an input tag. I think I've got most of it working.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function OnLoad() {
$('.insert').live('click', function() {
var currentRow = $(this).parents("tr:first");
var newRow = currentRow.clone(true);
// Help need here: change the 3rd table data into an input control
currentRow.after(newRow);
});
}
google.load("jquery", "1");
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
<form>
<table border="1">
<tr>
<td class="insert">Add</td>
<td class="delete">Erase</td>
<td>Sample data goes here</td>
</tr>
</table>
</form>
</body>
</html>