请教树的展开关闭如何变化左边的“+”和“-”图标，有代码~~急~~谢谢

请教树的展开关闭如何变化左边的“+”和“-”图标，有代码急谢谢

“+”和“-”图标
“+”和“-”图标的onlick事件控制图标的src.
eg.
<img src="+.gif" onclick="imgclick(this)">
<script>
function imgclick(obj)
{
  if (obj.src="+.gif")
   {
    obj.src="-.gif"
    //将些分支显示(显示，用display属性控制)
   }
  else
  {
    obj.src="+.gif"
   //将些分支隐藏(不显示，用display属性控制)
   }
}
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

正确答案是：
href="javascript:void(0)" onclick="TNodes_Detail_Ck你的href="javascript:里面的this不是链接本对象
看了就头晕！
把代码整理一下，把多余的空格，tab符去掉,尽量使得不换行。
改好了，贴回原来的位置就行了：<html>
<head>
  <script language=javascript>
    //cMenuClosed,cMenuOpened
    var cMenuClosed = "+";
    var cMenuOpened = "-";
    var cPreWidth = "10%";
    var cContentWidth = "90%";
    var cChildTrNamePre = "SubMenu_";    //all
    var Root = new Array("all", "999999");
    var Offices = new Array();
    Offices[0] = "";
    Offices[1] = new Array();
    Offices[1][0] = "AA";
    Offices[1][1] = "1";
    Offices[1][2] = "0";
    Offices[1][3] = new Array();
    Offices[1][3][0] = "";
    Offices[1][3][1] = new Array("b","100","0");
    Offices[1][3][2] = new Array("c", "101", "0");
    Offices[1][3][3] = new Array("d", "103", "0");
    Offices[1][3][4] = new Array("e", "104", "0");
    Offices[1][3][5] = new Array("f", "105", "0");    Offices[2] = new Array();
    Offices[2][0] = "BB";
    Offices[2][1] = "2";
    Offices[2][2] = "0";
    Offices[2][3] = new Array();
    Offices[2][3][0] = "";
    Offices[2][3][1] = new Array("g","200","0");
    Offices[2][3][2] = new Array("h", "201", "0");
    Offices[2][3][3] = new Array("i", "203", "0");
    Offices[2][3][4] = new Array("j", "204", "0");
    Offices[2][3][5] = new Array("k", "205", "0");    var OfficeSelect = '200';
    var OfficeSelectPath = new Array('','1');    function TNodes_Detail_Ck(Aele, eleid){
var tableObj = document.getElementById(eleid);
if(tableObj.style.display == "none"){
Aele.innerHTML = cMenuOpened;
            tableObj.style.display = "";
        }else{
            Aele.innerHTML = cMenuClosed;
            tableObj.style.display = "none";
        }
    }    function inOfficeSelectPath(OfficeCode){
for(var i=1; i<OfficeSelectPath.length-1; i++)
if (OfficeSelectPath[i] == OfficeCode) return true;
return false;
    }    function CreateOfficesTree(){
        //first create root
var debugid=0;
try{
//alert('');
document.writeln('<tr>');
document.writeln('  <td width="'+cPreWidth+'" align="right">');
if(Offices.length==0){
document.writeln(cMenuClose);
}else{
var bOpen = OfficeSelectPath.length>1?true:false;
document.writeln('    <a href="#" onclick="TNodes_Detail_Ck(this,\''+cChildTrNamePre+Root[1]+'\')">' + (bOpen?cMenuOpened:cMenuClosed) + '</a>');
}
document.writeln('  </td>');
document.writeln('  <td width="'+cContentWidth+'">');
document.writeln('    <a href="main.cgi?OfficeCode='+Root[1]+'" target="mainFrame">'+cChildTrNamePre+Root[0]+'</a>');
document.writeln('  </td>');
document.writeln('</tr>');
debugid=1;
//second create offices
if(Offices.length>1){
document.writeln('  <tr id="'+cChildTrNamePre+Root[1]+'">');
document.writeln('    <td width="10%" align="right">');
document.writeln('    </td>');
document.writeln('    <td width="90%">');
document.writeln('      <table width="100%" cellpadding="0" cellspacing="0" border="1">');

//output Office level 1
for(var i=1; i<Offices.length; i++){
document.writeln('         <tr>');
document.writeln('           <td align="right">');
if(Offices[i][2].length==0){
document.writeln('             '+cMenuOpened);
}else{
document.writeln('             <a href="#" onclick="TNodes_Detail_Ck(this,\''+cChildTrNamePre+Offices[i][1]+'\')">' + (bOpen?cMenuOpened:cMenuClosed) + '</a>');
}
document.writeln('           </td>');
document.writeln('           <td>');
document.writeln('             <a href="main.cgi?OfficeCode='+Offices[i][1]+'" target="mainFrame">'+Offices[i][0]+'</a>');
document.writeln('           </td>');
document.writeln('         </tr>');

//output Office level 2
if(Offices[i][3].length>1){
document.writeln('        <tr id="'+cChildTrNamePre+Offices[i][1]+'">');
document.writeln('          <td align="right">');
document.writeln('          </td>');
document.writeln('          <td>');
document.writeln('            <table width="100%" cellpadding="0" cellspacing="0" border="1">');
debugid=11;
//output Office level 3
for(var j=1; j<Offices[i][3].length; j++){
debugid=1+" "+j;
document.writeln('         <tr id="'+cChildTrNamePre+Offices[i][3][j][1]+'">');
document.writeln('           <td align="right">');
if(Offices[i][3][j][2]=="0"){
document.writeln('             '+cMenuOpened);
}else{
document.writeln('             <a href="#" onclick="TNodes_Detail_Ck(this,\''+cChildTrNamePre+Offices[i][3][j][1]+'\')">' + (bOpen?cMenuOpened:cMenuClosed) + '</a>');
}
document.writeln('           </td>');
document.writeln('           <td>');
document.writeln('             <a href="main.cgi?OfficeCode='+Offices[i][3][j][1]+'" target="mainFrame">'+Offices[i][3][j][0]+'</a>');
document.writeln('           </td>');
document.writeln('         </tr>');
debugid=2+" "+Offices[i][3][j][0];
} // for
document.writeln('            </table>');
document.writeln('          </td>');
document.writeln('        </tr>'); }
}
debugid=2;
document.writeln('      </table>');
document.writeln('    </td>');
document.writeln('  </tr>');
}
}catch(e){
alert(e+" "+debugid);
}
    }
  </script>
</head>
<body topmargin="0" leftmargin="0">
<table width="100%" cellpadding="0" cellspacing="0" border="1">
  <tr>
    <td width="100%" bgcolor="#99CCCC" align="center" colspan=3>
      tree
    </td>
  </tr>
<script language=javascript>
CreateOfficesTree();
</script>
</table>
</body>
</html>
三个文件，自己看着分别存。xml,xsl,htm<?xml version="1.0" encoding="GB2312" ?>
<?xml-stylesheet type="text/xsl" href="tree.xsl" ?>
<tree>
<node title="中国">
<node title="江苏">
<node title="泰州">
<node title="白马" />
</node>
<node title="徐州" />
<node title="南京" />
<node title="无锡" />
</node>
<node title="上海">
<node title="徐家汇" />
<node title="莘庄" />
<node title="中山公园" />
</node>
<node title="北京" />
<node title="四川" />
<node title="海南" />
</node>
<node title="米国">
<node title="加利福利亚" />
<node title="纽约" />
</node>
<node title="伊拉克" />
</tree>
<?xml version="1.0" encoding="GB2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="node">
<div>
<span onclick="toggle(this)" class="">
<xsl:choose>
<xsl:when test="count(*)>0">
─</xsl:when>
<xsl:otherwise>
·</xsl:otherwise>
</xsl:choose>
</span>
<span>
<xsl:value-of select="@title" />
</span>
</div>
<div class="indent">
<xsl:apply-templates select="./node" />
</div>
</xsl:template>
</xsl:stylesheet><style>
body
{
background-color: #eeeeee;
font-size:14;
}
div
{
cursor:hand;
}
div.indent
{
padding-left: 30;}span
{
border:1px solid;
border-color:#999999;
font-size:14;
height:18;
}
span.
{
width:15;
height:15;
text-align:center;
border:1px solid;
border-color:#999999;
font-size:10;
background-color:white;

}
</style><SCRIPT  >

function toggle(s)
{
var d = s.parentElement.nextSibling;
if (d.childNodes.length > 0)
{
if (d.style.display == '')
{
d.style.display = 'none';
s.innerText = '┼';
}
else
{
d.style.display = '';
s.innerText = '─';
}
}
}function document.onselectstart()
{
document.selection.clear();
}var xmldoc, xsldoc;
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("tree.xml");
xsldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xsldoc.load("tree.xsl");document.write('<div id="tree">' + xmldoc.transformNode(xsldoc) + '</div>');

</SCRIPT>