Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    appendChild to add rows to table not working in ff

    I am making a form that has 4 inputs per item (item #, price, quantity, extended price). I am formatting the form in a table and I want to be able to add another row of inputs when the user clicks the button. it is working in ie but not ff. I realize that i need to change the inputs to innerHTML but nothing is appearing in ff even when i try to append the <p>

    function addRow() {
    var row = document.createElement('p');
    row.appendChild(document.createTextNode("hi"));
    document.body.appendChild(row);
    var table = document.getElementById('ordertable');
    var row = document.createElement('tr');
    table.appendChild(row);
    var td1 = document.createElement('td');
    td1.appendChild(document.createTextNode("hi"));
    row.appendChild(td1);
    var td2 = document.createElement('td');
    td2.appendChild(document.createTextNode('<input name="unit" type="text" size="10" value="">'));
    row.appendChild(td2);
    var td3 = document.createElement('td');
    td3.appendChild(document.createTextNode('<input name="qty" type="text" size="10" value="">'));
    row.appendChild(td3);
    var td4 = document.createElement('td');
    td4.appendChild(document.createTextNode('<input name="ext" type="text" size="10" value="">'));
    row.appendChild(td4);
    }

    ------html----------
    <table >
    <tbody id="ordertable">
    <tr>
    <td>Part #</td>
    <td>Unit Price</td>
    <td>Quanity</td>
    <td>Extended Price</td>
    </tr>
    <tr>
    <td><input name="part" type="text" size="10" value=""></td>
    <td><input name="unit" type="text" size="10" value=""></td>
    <td><input name="qty" type="text" size="10" value=""></td>
    <td><input name="ext" type="text" size="10" value=""></td>
    </tr>
    </tbody>
    </table>

    <a href="javascript:addRow()">Add another row</a><br>

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Seems to work fine in FF3. Additionally, I'd suggest fixing your HTML mark-up. Your input tags need to be closed, though that shouldn't affect it either.

    Tested with the following code and mark-up:

    Code:
    <script type="text/javascript">
    function addRow() {
    	var row = document.createElement('p');
    	row.appendChild(document.createTextNode("hi"));
    	document.body.appendChild(row);
    	var table = document.getElementById('ordertable');
    	var row = document.createElement('tr');
    	table.appendChild(row);
    	var td1 = document.createElement('td');
    	td1.appendChild(document.createTextNode("hi"));
    	row.appendChild(td1);
    	var td2 = document.createElement('td');
    	td2.innerHTML = '<input name="unit" type="text" size="10" value="" />';
    	row.appendChild(td2);
    	var td3 = document.createElement('td');
    	td3.innerHTML = '<input name="qty" type="text" size="10" value="" />';
    	row.appendChild(td3);
    	var td4 = document.createElement('td');
    	td4.innerHTML = '<input name="ext" type="text" size="10" value="" />';
    	row.appendChild(td4);
    }
    </script>
    </head>
    <body>
    <table >
    <tbody id="ordertable">
    <tr>
    <td>Part #</td>
    <td>Unit Price</td>
    <td>Quanity</td>
    <td>Extended Price</td>
    </tr>
    <tr>
    <td><input name="part" type="text" size="10" value="" /></td>
    <td><input name="unit" type="text" size="10" value="" /></td>
    <td><input name="qty" type="text" size="10" value="" /></td>
    <td><input name="ext" type="text" size="10" value="" /></td>
    </tr>
    </tbody>
    </table>
    
    <a href="javascript:addRow()">Add another row</a><br>
    Please wrap your code in [code] tags next time as the posting guidelines suggest.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks. Yeah i guess my browser wasnt loading my changes... it does work now. Sorry about the code formatting. thanks again.


  •  

    Tags for this Thread

    Posting Permissions

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