SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    276
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    removing rows from a table.

    Hi,
    I am trying to add rows and remove rows from a table using javascript and I have managed to get somewhere adding rows using the below code

    Code:
    function insRow(rowIndex)
    {
     var results = document.booking.stopoff.value; 
     if(rowIndex == null)rowIndex = 0;
    
     
     //1 stop off.
     if(results == '1s')
     	{
     		var x=document.getElementById("test").insertRow(rowIndex)
     		var a=document.getElementById("test").insertRow(rowIndex+1)
     		var y=x.insertCell(0)
     		var z=x.insertCell(1)
     		var b=a.insertCell(0)
     		var c=a.insertCell(1)
    		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop:</div></span>"
     		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_s1\" type=\"text\" class=\"text\"  value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
    	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of stop:</div></span>"
     		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_s1\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
    	}
     if(results == '1r')
     	{
     		var x=document.getElementById("test").insertRow(rowIndex)
     		var a=document.getElementById("test").insertRow(rowIndex+1)
     		var y=x.insertCell(0)
     		var z=x.insertCell(1)
     		var b=a.insertCell(0)
     		var c=a.insertCell(1)
    		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for return stop:</div></span>"
     		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_s2_1\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
    	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of return stop:</div></span>"
     		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_s2_1\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
    		var x=document.getElementById("test").insertRow(rowIndex)
     		var a=document.getElementById("test").insertRow(rowIndex+1)
     		var y=x.insertCell(0)
     		var z=x.insertCell(1)
     		var b=a.insertCell(0)
     		var c=a.insertCell(1)
    		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop:</div></span>"
     		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_s2_2\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
    	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of stop:</div></span>"
     		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_s2_2\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
    		
    	}
    
     if(results == '2s')
     	{
     		var x=document.getElementById("test").insertRow(rowIndex)
     		var a=document.getElementById("test").insertRow(rowIndex+1)
     		var y=x.insertCell(0)
     		var z=x.insertCell(1)
     		var b=a.insertCell(0)
     		var c=a.insertCell(1)
    		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop 2:</div></span>"
     		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_2s_1\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
    	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of return stop:</div></span>"
     		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_2s_1\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
    		var x=document.getElementById("test").insertRow(rowIndex)
     		var a=document.getElementById("test").insertRow(rowIndex+1)
     		var y=x.insertCell(0)
     		var z=x.insertCell(1)
     		var b=a.insertCell(0)
     		var c=a.insertCell(1)
    		y.innerHTML="<span class=\"text\"><div align=\"right\">Reason for stop 1:</div></span>"
     		z.innerHTML="<span class=\"text\"><div align=\"left\"><input name=\"reason_2s_2\" type=\"text\" class=\"text\" value=\"e.g. pick up keys for apartment.\" size=\"35\"></div></span>"
    	 	b.innerHTML="<span class=\"text\"><div align=\"right\">Address of stop:</div></span>"
     		c.innerHTML="<span class=\"text\"><div align=\"left\"><textarea name=\"address_2s_2\" cols=\"30\" rows=\"4\" class=\"text\" id=\"address[]\"></textarea></div></span>"
    		
    	}
    }
    I fire this from an onchange event from a select box, this works to an extend in so far that every time i change the select box it adds the required number of rows to the table.
    My question is though, everytime the onchange event fires I want to remove the previous number of rows from the table. For instance I initaly select 3 rows to be inserted and change my mind to 2 how do i remove the first 3 rows before I add 2?

    Hope thats clear.
    Thanks
    Chris

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a couple of ways, perhaps an option would be to set a cookie of the elements in the table, check the cookie and then update accordingly, alternativly you might want to set an attribute in the TR somewhere that you can read and destroy if it doesnt match the request of the new onchage.

    Dont know if that helps any
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    SitePoint Addict
    Join Date
    Mar 2005
    Posts
    276
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by -Ox View Post
    There are a couple of ways, perhaps an option would be to set a cookie of the elements in the table, check the cookie and then update accordingly, alternativly you might want to set an attribute in the TR somewhere that you can read and destroy if it doesnt match the request of the new onchage.

    Dont know if that helps any

    it does help thanks, have you any sample code I could have a peek at to see how its done.

    Regards
    Chris

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use deleteRow() or removeChild().

    Here's an example I found.
    Code:
    var mytable=document.getElementById("atable")
    while (mytable.rows.length>0) //deletes all rows of a table
    mytable.deleteRow(0) //delete first row of contracting table until there are none left
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •