SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist goughb's Avatar
    Join Date
    Sep 2000
    Location
    Chicago
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Removing a table row, storing it in an array, display it later

    Hey,

    Using javascript how do I remove all the data within a particular table row and store it in an array. Then if the user wants it back I append the information to the same table again from the array.

    Thx,
    Brett

  2. #2
    SitePoint Evangelist goughb's Avatar
    Join Date
    Sep 2000
    Location
    Chicago
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, I figured it out..

    Is there a javascript function that will print out an object attributes and its children? etc... What do you use to debug besides alert() and a debugging application? Thanks.

    Brett

  3. #3
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by goughb
    Ah, I figured it out..
    Please post some code, or an explanation of what you did so that others may learn from your efforts. Otherwise someone with exactly the same question still has to post again, and then they find out, and don't post how, and so on, and so forth.......!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  4. #4
    SitePoint Evangelist goughb's Avatar
    Join Date
    Sep 2000
    Location
    Chicago
    Posts
    526
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    of course.. :)

    This whole thing derived from putting together a user interface for an intranet. Essentially when a user comes into the site they will have their own personalized panel. They can do different things with those panels. Such as close them minimize them or open them. The two functions below are the basic open and close functions that I used in a seperate javascript file:

    Code:
    var rowArray = new Array;
    var panelModified = false;
    function panelOpen(panel, panelName)
    {
    	if(rowArray[panelName])
    	{
     		panel.children(0).children(1).replaceNode(rowArray[panelName]);//there may be a better way of doing this if their is let me know.
    		eval("document.panels." + panelName + "Status.value = 1");
    		panelModified = true;
    	}
    	else
    		return true;
    }
    function panelClose(panel, panelName)
    {
    	var tempRow = document.createElement('TR');
    	with (tempRow)
       	 {
       	   	name = "removed";
    		id = "bad";
    	}
    	if(panel.children(0).children(1).getAttribute('id') != "bad")
    	{
    		rowArray[panelName] = panel.children(0).children(1).replaceNode(tempRow);
                    eval("document.panels." + panelName + "Status.value = 0");
    		panelModified = true;
    	}
            else
                    return true;
    }
    The eval() functions are their for the next step which is updating hidden fields in the document that will be sent to an update preferences page if any modifications have been made. This is simply done with and onunload in the body. Below is the basic html for the panels.

    Code:
    <form method="post" name="panels" target="_new">	
      <table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">	
      <tr><td height="25">
         <input type="hidden" name="panel1Status" value="1"/>
         <table width="100%" border="0" cellpadding="0" cellspacing="0" id="panel1">
         <tr><td height="25" valign="bottom">
            <img src="templateImages/intranetPanelTop.gif" width="150" height="25" border="0" usemap="#panelTop1">
         </td></tr>
         <tr><td>
            <div class="panelBox"> 
                text.. etc..
            </div>
         </td></tr>
         </table>
      </td></tr><tr><td>
      <input type="hidden" name="panel2Status" value="1"/>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" id="panel2">
         <tr><td height="25" valign="bottom">
         <img src="templateImages/intranetPanelTop.gif" width="150" height="25" border="0" usemap="#panelTop2">
         </td></tr>
         <tr><td>
         <div class="panelBox"> 
             Some Text
         </div>
         </td></tr>
         </table>
       </td></tr>
     </table>
    </form>
    Finally the image maps which I will have php generate for each panel:

    Code:
    <map name="panelTop1">
      <area shape="circle" coords="104,13,6" onClick="javascript:panelClose(document.all.panel1, 'panel1');" href="#">
      <area shape="circle" coords="135,13,7" onClick="javascript:panelOpen(document.all.panel1, 'panel1');" href="#">
    </map>
    <map name="panelTop2">
      <area shape="circle" coords="104,13,6" onClick="javascript:panelClose(document.all.panel2, 'panel2');" href="#">
      <area shape="circle" coords="135,13,7" onClick="javascript:panelOpen(document.all.panel2, 'panel2');" href="#">
    </map>
    Last edited by goughb; Aug 10, 2002 at 07:21.

  5. #5
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for posting the code and explanation - I'm sure that'll come in handy for someone!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!


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
  •