SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What's wrong with this code? Much difficulty manipulating the W3C DOM in IE6/Mozilla

    I am creating a page with a form. The form is going to include several text input boxes. If users want additional input boxes, they can click a button and they will automatically be inserted with Javascript.

    I originally intended for the button to add additional rows to a table with the innerHTML property. However, it appears that the property is read-only.


    I then decided to use the DOM to add the nodes with appendChild. This is the code that I created:

    View the page at: http://rideauhs.com/test/auto.html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Document.write test</title>
    <script type="text/javascript">var counter = 1;
    
    function insert(){
    	var newR = document.createElement("tr");
    	
    	create((counter++),"TextNode");
    	create("Name","TextNode");
    	
    	var newN = document.createElement("td");
    	var textN = document.createElement("input");
    	newN.appendChild(textN);
    	
    	var trElm = document.getElementById("counter");
    	trElm.appendChild(newN);
    	}
    
    function create(var1){
    	var newN = document.createElement("td");
    	var textN = document.createTextNode(var1);
    	newN.appendChild(textN);
    	
    	var trElm = document.getElementById("counter");
    	trElm.appendChild(newN);
    	}
    </script>
    </head>
    <body>
    	<form>
    		<table border="1">
    			<tr>
    				<th>	Line #
    				</th>
    				<th>	Field Label
    				</th>
    				<th>	Input Area
    				</th>
    			</tr>
    			<tbody id="counter">
    				<tr>
    					<td>	1
    					</td>
    					<td>	Name
    					</td>
    					<td>
    						<input type='text' name='textfield'/>
    					</td>
    				</tr>
    			</tbody>
    		</table>
    		<input type="button" value="Add New Line" onClick="insert();"/>
    	</form>
    </body>
    </html>
    In IE6, clicking the button does nothing instead of inserting another row into the table. In Mozilla, the row is inserted in the wrong place in the document.

    Do you know how to fix my script or can you direct me to working script that does what I want?

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could try something like this

    PHP Code:

    <HTML>
    <
    HEAD><TITLE>Welcome!</TITLE>
    <
    SCRIPT LANGUAGE="JScript">

    document.expando true;

    function 
    changeMe() {
        
    MyHeading.outerHTML "<H1 ID=MyHeading unselectable=\"on\">Dynamic HTML!<HR SIZE=1></H1>";
        
    MyHeading.style.color "silver";
        
    MyText.innerText "try this out.";
        
    MyText.align "center";
        
    document.body.insertAdjacentHTML("BeforeEnd""<P ALIGN=\"center\" unselectable=\"on\">click again!</P>");
    }

    </SCRIPT>

    </HEAD>


    <BODY onclick="changeMe();" TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000">

        <p align="center" onclick="blur()">
            <BLOCKQUOTE CLASS="body" unselectable="on">
                <H3 ID="MyHeading" unselectable="on">DHTML!</H3>
                <P ID="MyText" unselectable="on">Click anywhere on this page.</P>
            </BLOCKQUOTE>
        </p>

    </BODY>
    </HTML> 

  3. #3
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    A tutorial I wrote for DHTML is here:

    http://www.pageresource.com/dhtml/ryan/

    The last part deals with W3C DOM and there's a more complicated example in it that's what you need on:

    http://www.pageresource.com/dhtml/ryan/part4-8.html

    But, it'll probably only work in browsers that do a good job with W3C DOM (Mozilla). But, you might wanna read the whole tutorial (or atleast the last part dealing with W3C DOM)

    aDog

  4. #4
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, y'all.

    It turns out that I was making a very stupid mistake:

    I create a row
    I create a cell
    I create a text node
    I append the text node to the cell
    *but* I forgot to append the cell to the row! And that's why it didn't work


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
  •