M
mattrapoport
Hello - I am kinda new to the HTML DOM so I apologize in advance for my
ignorance.
I have a table made from divs. I am trying to write a script that
appends a new row to the table (by cloning the last row) and then
adding some text to the fields in that row. My script works perfectly
in IE but not even close in Firefox. Here's my HTML ...
HTML:
<div name='test' id='attachTable'>
<div name='first'>
<div class='iw_fieldBox attach_name iw_fieldBottom'>
<div class='attachName' name='attachName'> </div>
</div>
<div class='iw_fieldBox attach_desc_x iw_fieldRightBottom'>
<div class='attachDesc' name='attachDesc'> </div>
<div class='iw_xSign'><img alt='' src='../images/x.jpg'></div>
</div>
</div>
</div>
The "attachTable" div contains the entire table. The div named "first"
contains the first and only row. There are 2 fields in each row -
attachName & attachDesc - I want to change the text of these fields in
the newly created row. Here's my js ...
function appendRow(tableName, contents)
{
// FIND THE TABLE IN WHICH TO APPEND THE ROW
oTable = document.getElementById(tableName);
// CLONE THE LAST NODE (IN THIS INSTANCE IT IS THE DIV NAMED "FIRST")
oNewRow = oTable.lastChild.cloneNode(true);
// ERASE THE NAME
oNewRow.name = '';
// CHANGE THE BORDER STYLE ON ALL CELLS
if (oNewRow.hasChildNodes)
{
for (var i = 0; i < oNewRow.childNodes.length; i++)
{
oNewRow.childNodes.className += " eraseTopBorder";
}
}
// THE CONTENTS VARIABLE CONTAINS A STRING OF ARGUMENTS
// IN THE FORMAT fieldName!q=q!fieldValue;q*q;fieldName!q=q!fieldValue
....
// THESE ARGUMENTS ARE USED TO CHANGE THE TEXT OF THE ROW
contentArray = contents.split(";q*q;");
for (var i = 0; i < contentArray.length; i++)
{
stringSplit = contentArray.split("!q=q!")
if (stringSplit.length == 2)
{
// THIS CALLS A RECURSIVE FUNCTION TO FIND THE FIELD AND THEN
// REPLACE ITS TEXT
replaceNodeData(oNewRow, stringSplit[0], stringSplit[1]);
}
}
// APPEND THE NEW NODE TO THE END OF THE TABLE
oTable.appendChild(oNewRow);
return (oNewRow);
}
function replaceNodeData(node, node_Name, node_Value)
{
// THIS IS MY RECURSIVE FUNCTION - IT'S MEANT TO WALK THE TREE
// UNDERNEATH MY NEW ROW AND FIND THE FIELDS BY NAME
for (var j = 0; j < node.childNodes.length; j++)
{
replaceNodeData(node.childNodes[j], node_Name, node_Value);
}
// IF THE NODE'S NAME MATCHES THE ARGUMENT, THEN THE TEXT IS CHANGED
// NOTE THAT THE TEXT IS CHANGED ON THE CHILDNODE BECAUSE I BELIEVE THE
// TEXT IS A TEXT ELEMENT CONSIDERED UNDERNEATH ITS DIV.
if (node.name == node_Name)
{
node.firstChild.data = node_Value;
}
}
As I said, it works perfectly in IE. In FireFox it fails miserably. I
can't seem to find a function that reads the name of the DIV. In IE
it's just node.name. There's also node.nodeName and node.tagName. But
those just giv the name of the node (e.g. "DIV").
Also, the recursive function is not recursive in FireFox because it's
not walking the tree. It's like it starts at the last node. It's very
strange.
Any help would be greatly appreciated.
Thanks,
Matt
ignorance.
I have a table made from divs. I am trying to write a script that
appends a new row to the table (by cloning the last row) and then
adding some text to the fields in that row. My script works perfectly
in IE but not even close in Firefox. Here's my HTML ...
HTML:
<div name='test' id='attachTable'>
<div name='first'>
<div class='iw_fieldBox attach_name iw_fieldBottom'>
<div class='attachName' name='attachName'> </div>
</div>
<div class='iw_fieldBox attach_desc_x iw_fieldRightBottom'>
<div class='attachDesc' name='attachDesc'> </div>
<div class='iw_xSign'><img alt='' src='../images/x.jpg'></div>
</div>
</div>
</div>
The "attachTable" div contains the entire table. The div named "first"
contains the first and only row. There are 2 fields in each row -
attachName & attachDesc - I want to change the text of these fields in
the newly created row. Here's my js ...
function appendRow(tableName, contents)
{
// FIND THE TABLE IN WHICH TO APPEND THE ROW
oTable = document.getElementById(tableName);
// CLONE THE LAST NODE (IN THIS INSTANCE IT IS THE DIV NAMED "FIRST")
oNewRow = oTable.lastChild.cloneNode(true);
// ERASE THE NAME
oNewRow.name = '';
// CHANGE THE BORDER STYLE ON ALL CELLS
if (oNewRow.hasChildNodes)
{
for (var i = 0; i < oNewRow.childNodes.length; i++)
{
oNewRow.childNodes.className += " eraseTopBorder";
}
}
// THE CONTENTS VARIABLE CONTAINS A STRING OF ARGUMENTS
// IN THE FORMAT fieldName!q=q!fieldValue;q*q;fieldName!q=q!fieldValue
....
// THESE ARGUMENTS ARE USED TO CHANGE THE TEXT OF THE ROW
contentArray = contents.split(";q*q;");
for (var i = 0; i < contentArray.length; i++)
{
stringSplit = contentArray.split("!q=q!")
if (stringSplit.length == 2)
{
// THIS CALLS A RECURSIVE FUNCTION TO FIND THE FIELD AND THEN
// REPLACE ITS TEXT
replaceNodeData(oNewRow, stringSplit[0], stringSplit[1]);
}
}
// APPEND THE NEW NODE TO THE END OF THE TABLE
oTable.appendChild(oNewRow);
return (oNewRow);
}
function replaceNodeData(node, node_Name, node_Value)
{
// THIS IS MY RECURSIVE FUNCTION - IT'S MEANT TO WALK THE TREE
// UNDERNEATH MY NEW ROW AND FIND THE FIELDS BY NAME
for (var j = 0; j < node.childNodes.length; j++)
{
replaceNodeData(node.childNodes[j], node_Name, node_Value);
}
// IF THE NODE'S NAME MATCHES THE ARGUMENT, THEN THE TEXT IS CHANGED
// NOTE THAT THE TEXT IS CHANGED ON THE CHILDNODE BECAUSE I BELIEVE THE
// TEXT IS A TEXT ELEMENT CONSIDERED UNDERNEATH ITS DIV.
if (node.name == node_Name)
{
node.firstChild.data = node_Value;
}
}
As I said, it works perfectly in IE. In FireFox it fails miserably. I
can't seem to find a function that reads the name of the DIV. In IE
it's just node.name. There's also node.nodeName and node.tagName. But
those just giv the name of the node (e.g. "DIV").
Also, the recursive function is not recursive in FireFox because it's
not walking the tree. It's like it starts at the last node. It's very
strange.
Any help would be greatly appreciated.
Thanks,
Matt