Deleting a Row/Text Field Dynamically
Posted: Sat May 14, 2011 6:47 am
Hi,
At the moment I have some code that allows me to add a new row to my table, along with a new text field.
With the HTML being;
As you can see from the form I also have a delete button. When I press the delete button I would like it to not only delete the row but also the text field. When the user presses submit it takes them to the next page where it displays the values that have been inserted. If the field is deleted then I do not want it to be displayed on the next page.
Please could someone help me out with this.
Thanks
At the moment I have some code that allows me to add a new row to my table, along with a new text field.
Code: Select all
var currentTxtBx = 0;
function addRow(tableID) {
if (currentTxtBx<10){
if (currentTxtBx<10){
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = 'check'+(currentTxtBx+1);
currentTxtBx++;
cell1.appendChild(element1);
}
}
else
{
alert('cannot add more than 10 boxes');
}
}
</SCRIPT>
Code: Select all
<form name="test" method="post" action="insert.php">
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<input type="submit" name="submit" value="Test Submit">
<TABLE id="dataTable" width="350px" border="0">
</TABLE>
</form>
Please could someone help me out with this.
Thanks