I am creating a form which adds a table row on a button click so far its working fine but I want to have a delete button beside every row generated by the button click, but not on the first row. I’ve searched many blogs but came up with nothing can anyone guide me in doing it? I am just a beginner.
Here is my script:
<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" type="text/javascript">
var i=1;
function addRow()
{
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'name' + i;
el.id = 'name' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'address' + i;
el2.id = 'address' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'contactNum' + i;
el3.id = 'contactNum' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);
frm.h.value=i;
i++;
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title></head>
<body>
<form action="submit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1">
<tr>
<td><strong>Name</strong></td>
<td><strong>Address</strong> </td>
<td><strong>Contact Num</strong> </td>
</tr>
<tr>
<td><input name="name" type="text" id="name" size="20" maxlength="20" /></td>
<td><input name="address" type="text" id="address" size="20" maxlength="20" /></td>
<td><input name="contactNum" type="text" id="contactNum" size="20" maxlength="12" /></td>
</tr>
</table>
<input type="button" value="Add" onclick="addRow();" />
<input name="Submit" type="submit" value="Submit" />
<label>
<input name="h" type="hidden" id="h" value="0" />
</label>
</form>
</body>
</html>
I think you are looking for add row jquery plugin.