I have a problem navigating a form in a table in IE using
the DOM. I can do what I want in Firefox, but not in IE.
The rest of my question and information is embedded
in the following code. Sorry, I don't have a web page to
publish it in.
I have tried to make it so it will copy and paste OK.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title> Clone Puzzle </title>
<script type="text/javascript">
function reportKids(thing,txt) {
var f = thing.childNodes;
var preTxt = '';
var msg = txt;
for (var i=0; i<f.length; ++i){
msg += '\nChild ' + i + ' is a ' + f[i];
var g = f[i].childNodes;
for (var j=0; j<g.length; ++j){
preTxt = '\nChild ' + i + ', subChild '
msg += preTxt +
j + ' is a ' + g[j] +
' of type ' + g[j].nodeType;
if (g.childNodes){
msg += '\n.....More kids this node';
} else {
msg += '\n.....No more kids this node';
}
if (g.nextSibling){
msg += '\n.....Some sibs this node';
} else {
msg += '\n......No sibs this node';
} } }
alert(msg);
}
function addElement(theThing) {
if( !document.createElement || !document.childNodes ) {
window.alert('Your browser is not DOM compliant');
} else {
var thisRow = theThing.parentNode.parentNode;
var newElement = thisRow.cloneNode(true);
reportKids(newElement,'After clone, before add');
// The following lines work perfectly in Firefox but not IE
// newElement.childNodes[0].childNodes[1].reset();
// newElement.childNodes[0].childNodes[1].className = 'formBlur';
thisRow.parentNode.insertBefore(newElement,thisRow );
reportKids(newElement,'After add to table');
}}
</script>
</head>
<body style="font-family: sans-serif; color: #555555">
<table cellpadding="3"><tr><td width="400">
<p>Put some text in the field, then click the "Clone" button.
Function addElement gets the row that the form is in
(theThing.parent.parent), clones it
and adds the clone to the table.</p>
<p>Firefox and IE clone everything, including
the content (value) of the text area. I
wanted to reset the text area value and change
the style of the form, but I can't navigate
to either of them in IE using the tr reference
(newElement) as a starting point.</p>
<p>addElement shows alert boxes with the tree
of children of the cloned table row before and
after adding to the table. The extra "no more
kids/siblings" tests just show there's nothing more
to navigate to. The Report Kids button shows the
same thing for the row in the current page. This
was to show the tree is exactly the same at each
of the stages for each particular browser, but
different across browsers.</p>
<p>Firefox has everything there, but IE doesn't. How can
I reset the value of the text field and change the style
of the cloned form if I can't get to them from the tr
reference?</p>
</td></tr>
<tr><td>
<form name="aForm">
<input type="text" name="aText">
<input
type="button" name="aButton"
value="Clone"
onclick="addElement(this.form);"
onfocus="this.blur();">
<input type="button" name="bButton"
value="Report Kids"
onclick="reportKids(
this.form.parentNode.parentNode,
'native HTML');"
</form>
</td></tr>
<tr><td>
<p>The alert box contains all the children and subchildren of
the cloned <tr>
<p>Another interesting thing is that JavaScript has an
insertBefore method, but not an insertAfter - why not?
It means I have to put the cloned row before the current
row, which is not logical for my application. appendChild
to the table is very inconsistent across browsers, so I
can't use that (result is navigation issues above x 10!).
</td></tr></table>
</body>
</html
-
Rob
