...

View Full Version : appendChild to add rows to table not working in ff



joshstimpy
05-26-2009, 10:44 PM
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>

Eldarrion
05-26-2009, 11:00 PM
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:



<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.

joshstimpy
05-27-2009, 06:58 PM
Thanks. Yeah i guess my browser wasnt loading my changes... it does work now. Sorry about the code formatting. thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum