View Full Version : Adding & Deleting Rows

11-10-2010, 11:06 PM
I have created a calculator for my site but I am having troubles figuring out a way to make the "add row" and "delete row" functionality work correctly. I would like the user to only see 1 row of information and then add/delete rows as needed. I currently only have 4 static rows. If anyone can help it would be greatly appreciated. Thanks

The page is at

Old Pedant
11-10-2010, 11:48 PM
The easy way to do this is simply HIDE all but the first row. Then, when the user clicks on ADD ROW, you unhide the next row, etc. DELETE ROW is trickier: *WHICH* row does the user WANT to delete???

11-11-2010, 12:51 PM
First, validate your markup, here: http://validator.w3.org/
You have more than 300 "warnings."

Next, validate your CSS, here: http://jigsaw.w3.org/css-validator/

Add / Remove Table Row:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function addRow(){

var nForm = document.forms[0];
var nTableBody = nForm.getElementsByTagName('tbody')[0];
var nIndex = nForm.getElementsByTagName('tr');
var nClone = nIndex[0].cloneNode(true);
var nFloor = nIndex[nIndex.length - 1];
nRows = nTableBody.getElementsByTagName('tr');
nRows[nRows.length - 2].getElementsByTagName('td')[0].firstChild.data = nRows.length - 1;
var nField = nRows[nRows.length - 2].getElementsByTagName('input');
for (i=0; i<nField.length; i++)
nField[i].value = "";

function removeRow(){

var nTableBody = document.forms[0].getElementsByTagName('tbody')[0];
var nIndex = nTableBody.getElementsByTagName('tr');
var lastRow = nIndex[nIndex.length - 2];
if (nIndex.length > 2)

<style type="text/css">

.floor {display: none;}

<form action="">
<td><input type="text" name="student[]" size="20" /></td>
<td><input type="text" name="address[]" size="20" /></td>
<td><input type="text" name="email[]" size="20" /></td>
<td><input type="text" name="complete[]" size="20" /></td>
<td><input type="text" name="remediation[]" size="20" /></td>

<tr class="floor"><td>empty</td></tr>

<input type="button" value="Add" onclick="addRow();" >
<input type="button" value="Remove" onclick="removeRow();">
<input type="submit" name="submit" value="Submit">

Old Pedant
11-11-2010, 08:14 PM
While I completely agree with Sciliano's comments and the code is fine, I also think it's overkill. There's no reason to dynamically add and remove the rows when you can more easily show/hide existing rows.