Page 1 of 1

Deleting a Row/Text Field Dynamically

Posted: Sat May 14, 2011 6:47 am
by barrowvian
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.

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>
With the HTML being;

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>
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

Re: Deleting a Row/Text Field Dynamically

Posted: Sun May 15, 2011 1:44 pm
by getmizanur
tips
1./ use javascript framework such as jquery, it will make your life lot easier
2./ to add a table row you need to have incremental unique id, example id="tr1" id="tr2" id="tr3"; <tr id="tr1"><td><textarea></textarea></td></tr>
2./ to delete a particular table row, you need to identify the table row id and remove it.
3./ if you delete a field you won't have data to display on the next page.

Re: Deleting a Row/Text Field Dynamically

Posted: Mon May 16, 2011 12:53 pm
by barrowvian
I have tried this;

Code: Select all

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
			var i= 'currentTxtBx';
            var row = table.rows[i];

            if(currentTxtBx > 0){
                    table.deleteRow(i);
					currentTxtBx--;
			}
            }catch(e) {
                alert(e);
            }
        }
It works, but with one small problem. When the user presses delete it removes the row at the top of the table. For example, if there are 3 rows and the user presses delete then it removes row 1 rather than row 3. How do I change it so that it is the other way around? Thanks

Re: Deleting a Row/Text Field Dynamically

Posted: Tue May 17, 2011 10:21 am
by barrowvian
anyone?