PDA

View Full Version : how to toogle a table style display if its written like this?

guowei1000
06-14-2004, 04:20 AM
hi! finally able to do a table using DOM :) but i cant seem to toogle the style display. can anyone help? my code seen abit messy (nt real programer :p ) so hope u all dun mind. by the way, my toogle state function dun work as i cant find the next children/sibling/watever ....

<html>
<head>
<script language ="JAVASCRIPT">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("note.xml");
var strContent =""
var transfernode =""
function TestChildren(nodes)
{
document.writeln("<table border = 1>");
document.writeln("<tr>");
document.writeln("<td>");
document.writeln("<A onClick='javaScript:toogle_state(this)'><font color= red><IMG SRC='minus.gif'>"+ nodes.nodeName +"</font></A>");
if (nodes.hasChildNodes)
{
for (var i=0; i < nodes.childNodes.length; i++)
{
document.writeln("<table border = 1>");
document.writeln("<tr>");
document.writeln("<td>");
if (nodes.childNodes(i).hasChildNodes) // add toogle in
{
document.writeln("<font color= red><A onClick='javaScript:toogle_state(this)'><IMG SRC='minus.gif'>"+nodes.childNodes(i).nodeName +"</A></font>");
writechildren(nodes.childNodes(i))
}
else
{
document.writeln(nodes.childNodes(i).nodeName);
}
document.writeln("</tr>");
document.writeln("</td>");
document.writeln("</table>");
}
}
document.writeln("</td>");
document.writeln("</tr>");
document.writeln("</table>");
}

function toogle_state(nodeCounter)
{

// Unfold the branch if it isn't visible
alert(nodeCounter.childNodes(0).nodeName + nodeCounter.childNodes(1).data)
if (nodeCounter.nextSibling.style.display == 'none')
{

// Change the image (if there is an image)
if (nodeCounter.children.length > 0)
{
if (nodeCounter.children.item(0).tagName == "IMG")
{
nodeCounter.children.item(0).src = "minus.gif";
}
}
nodeCounter.nextSibling.style.display = '';
}
// Collapse the branch if it IS visible
else
{
// Change the image (if there is an image)
if (nodeCounter.children.length > 0)
{
if (nodeCounter.children.item(0).tagName == "IMG")
{
nodeCounter.children.item(0).src = "plus.gif";
}
}

nodeCounter.nextSibling.style.display = 'none';

}
}


function writechildren(sianz)
{
if (sianz.hasChildNodes)
{
for (var i=0; i < sianz.childNodes.length; i++)
{
document.writeln("<table border = 1>");
document.writeln("<tr>");
document.writeln("<td>");

if (sianz.childNodes(i).hasChildNodes) // add toogle in
{

if (sianz.childNodes(i).nodeName == "#text")
{
document.writeln("<font color= red><A onClick='javaScript:toogle_state(this)'><IMG SRC='minus.gif'>"+ sianz.childNodes(i).text + "</A></font>");
writechildren(sianz.childNodes(i))
}
else
{
document.writeln("<font color= red><A onClick='javaScript:toogle_state(this)'><IMG SRC='minus.gif'> "+ sianz.childNodes(i).nodeName + "</A></font>");
writechildren(sianz.childNodes(i))
}

}
else
{
if (sianz.childNodes(i).nodeName == "#text")
{
document.writeln(sianz.childNodes(i).text);
writechildren(sianz.childNodes(i))
}
else
{
document.writeln(sianz.childNodes(i).nodeName);
writechildren(sianz.childNodes(i))
}
}

document.writeln("</tr>");
document.writeln("</td>");
document.writeln("</table>");
}
}

}
function callReadXml()
{
root = xmlDoc.documentElement;
TestChildren(root);
}
</script>
</head>
<body>
<script type="text/javascript">
callReadXml();
</script>
</body>
</html>
guowei1000
06-14-2004, 04:31 AM
got a crazy idea of reading the node name in the html then pass it back to the xml then search in the xml for it children then pass the children back to the html then use the getElementsbyName then look for it in the html then style.display and toogle it state, but seen alot of coding .... can anyone help?
guowei1000
06-14-2004, 10:53 AM
seen like my crazy idea work! ya~ lol, so i post just to tell u all i done it already and no ans is needed :D