Deleting a Row/Text Field Dynamically

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Deleting a Row/Text Field Dynamically

Post 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
User avatar
getmizanur
Forum Commoner
Posts: 71
Joined: Sun Sep 06, 2009 12:28 pm

Re: Deleting a Row/Text Field Dynamically

Post 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.
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Deleting a Row/Text Field Dynamically

Post 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
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Deleting a Row/Text Field Dynamically

Post by barrowvian »

anyone?
Post Reply