jman wrote:
here's the full relevent code
function addRows()
{
var table = document.all('main');
document.all is all but extinct around here, use feature detection and
getElementById. There are various strategies for including support for
ancient IE versions that need document.all, a simple strategy that
provides limited emulation is:
if ( 'function' != typeof document.getElementById
&& 'function' == typeof document.all )
document.getElementById = document.all;
}
var elem = document.createElement("input");
elem.setAttribute( "type", "text");
elem.setAttribute( "name", "elem_b");
setAttribute is known to be buggy in IE, just don't use it if there is
any alternative. Use dot property access wherever possible (less
typing too :-) ):
elem.type = "text";
elem.name = "elem_b";
Some might say that since the default type for an input is text,
setting its type attribute to 'text' is redundant. I think you're
better off to set it explicitly.
table.appendChild( elem );
Is table an HTML table element?
Note that the *only* element that can be a child of a table is a table
section element (thead, tfoot or tbody). If you haven't coded a tbody
in the source HTML, one will be added by the browser when it loads the
page - it's a mandatory element, although the tags are optional.
Some browsers (but not IE) let you add TR elements to a table, but they
will actually add them to a tbody section. Adding an input element to
a table will result in invalid HTML - error correction may take over
and put it somewhere else that is valid.
var msg = "";
for ( var x = 0; x < document.forms[0].elements.length; ++x )
msg += document.forms[0].elements[x].name + ",";
alert(msg); // prints the name ok
alert(document.forms[0].elem_b); // fails
alert(document.forms[0].elements["elem_b"]); // fails
}
That doesn't look much like the code you originally posted. Here is a
trivial example, tested in IE and Firefox:
<script type="text/javascript">
function addRow(id){
var table = document.getElementById(id);
var rowToClone = table.rows[0];
var oRow = rowToClone.cloneNode(true);
var input = oRow.getElementsByTagName('input')[0];
input.name = 'input' + table.rows.length;
input.value = '';
rowToClone.parentNode.appendChild(oRow);
}
</script>
<button onclick="addRow('tableA')">Add row</button>
<form action="">
<table id="tableA">
<tr>
<td><input name="input0" onclick="this.value=this.name;"></td>
</tr>
</table>
</form>
