Having problems with my add button, it works . . . when it wants to. its OK when adding but when trying to add after deleting it gets moody and doesn't work. I didn't use a loop but there's a counter for the sake of the IDs cause i will be connecting a database to it. Please help.

<title>Work stuff</title>
<script language="javascript">
function addRow(tbl,row){

//row count

var tick = String(row_no);

if (row_no<20){

//Declaring text boxes

var textbox  ='<input type="text" size = "30"  maxlength= "30"  id=com'+tick+'>';
var textbox2 = '<input type="text" size = "30" maxlength= "30"  id=pos'+tick+'>';
var textbox3 = '<input type="text" size = "5" maxlength= "5"  id=frm'+tick+'>';
var textbox4 = '<input type="text" size = "5" maxlength= "5"  id=to'+tick+'>';
//delete button
var stop = '<input type="button" value="delete" onclick="deleteRow(this)" >';

//Inserting textboxes into table cells

var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;
//delete button within cell
var newCell = newRow.insertCell(4);
newCell.innerHTML = stop;

//Delete Function
function deleteRow(r)
var i=r.parentNode.parentNode.rowIndex;

<h3>So . . . Where have you worked</h3>

<!--table just for layout sake-->
<table width="100%" >
<td width = 80%>

<form name="invoice" method="post">

<b>Professional Experience</b>

<!--Main table-->
<table width="100%" border="0" cellspacing="0" cellpadding="2" id="TableMain">

<th>From (mm/yy)</th>

<tr id="row1">

<td valign="top" width = 20%>

<!--Add more button-->
</br></br></br><input type="button" name="Button" value="Add more" onClick="addRow('TableMain','row1')"></td>


Your are incrementing 'row_no' in addRow() but not decrementing it in deleteRow()

//Delete Function
function deleteRow(r)
    var i=r.parentNode.parentNode.rowIndex;
    // Decrementing row_no

You are a HERO

i want to add n number of rows in this.how can do?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.