Member Avatar for Monstette

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.

<HTML>
<head>
<title>Work stuff</title>
<script language="javascript">
row_no=0;
function addRow(tbl,row){

//row count
row_no++;

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;
document.getElementById('TableMain').deleteRow(i);
}

</script> 
</head>
<body>
<h3>So . . . Where have you worked</h3>

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

<!--Form-->
<form name="invoice" method="post">

<b>Professional Experience</b>
</br>
</br>

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

<!--Headers-->
<th><center>Company</th>
<th>Position</th>
<th>From (mm/yy)</th>
<th>To(mm/yy)</th>

<tr id="row1">
</tr>
</table>

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

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

</table>
</body>
</html>
Edited by Monstette because: n/a
  • 3 Contributors
  • 3 Replies
  • 983 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by kanna443

Recommended Answers

All 3 Replies

Member Avatar for Luckychap

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

//Delete Function
function deleteRow(r)
{
    var i=r.parentNode.parentNode.rowIndex;
    document.getElementById('TableMain').deleteRow(i);
    
    // Decrementing row_no
    row_no--;
}
Member Avatar for Monstette

You are a HERO
:)

Member Avatar for kanna443

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.