Add and delete table rows dynamically on button click

Question

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>

youhack.me/2010/03/26/… Is this kind of what you're going for? Or something similar to it — iHeff
– iHeff, Commented Jan 24, 2013 at 7:49
yes i need that but the delete button should generate with the second row if u run my script there will be a first row i want to generate deletebutton wen a new row is generated — john
– john, Commented Jan 24, 2013 at 7:57
thank u brandon but can u modify my code acutally i new to this so dont have much idea pls would be a huge favour — john
– john, Commented Jan 24, 2013 at 8:03

ceptno · Accepted Answer · 2013-01-24 07:55:37Z

0

You can use the deleteRow() method with the rowIndex property. Try using an onClick(this) call for the button in the row.

answered Jan 24, 2013 at 7:55

ceptno

6872 gold badges6 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ivan Ferić · Accepted Answer · 2013-01-24 08:16:19Z

0

Better try to search for data tables.. They can be used directly. You need not code in more also.. You also have many other features embedded in it.

edited Jan 24, 2013 at 8:16

Ivan Ferić

4,76311 gold badges40 silver badges47 bronze badges

answered Jan 24, 2013 at 7:59

Sekhar

217 bronze badges

1 Comment

john Over a year ago

my need is not datatable sir

Collectives™ on Stack Overflow

Add and delete table rows dynamically on button click

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related