哪位老大改一下这个TR缩进,展开的代码(100分)

<style>
.IBTable
{
    BORDER-RIGHT: gray thin;
    BORDER-TOP: gray thin;
    FONT-SIZE: 8pt;
    BORDER-LEFT: gray thin;
    COLOR: black;
    BORDER-BOTTOM: gray thin;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: palegreen
}
.IBTable_title
{
    BORDER-RIGHT: black thin;
    BORDER-TOP: black thin;
    FONT-WEIGHT: bolder;
    FONT-SIZE: 8pt;
    BORDER-LEFT: black thin;
    COLOR: blue;
    BORDER-BOTTOM: black thin;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: yellow
}
.IBTable_title2
{
    BORDER-RIGHT: black thin;
    BORDER-TOP: black thin;
    FONT-WEIGHT: bolder;
    FONT-SIZE: 8pt;
    BORDER-LEFT: black thin;
    COLOR: blue;
    BORDER-BOTTOM: black thin;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: #FFFFAE
}
.IBTable_system_id
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    FONT-WEIGHT: bolder;
    BORDER-LEFT: medium none;
    CURSOR: hand;
    COLOR: blue;
    BORDER-BOTTOM: medium none
}
.IBTable_sub
{
    BORDER-RIGHT: gray thin;
    BORDER-TOP: gray thin;
    DISPLAY: none;
    FONT-SIZE: 8pt;
    BORDER-LEFT: gray thin;
    BORDER-BOTTOM: gray thin;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: paleturquoise
}
tr
{
   t:expression(this.onclick=function(){change(this)});
}
</style>
<script>
function change(obj)
{
   
   if(/[abc]/.test(obj.id))
     {
        //this.style.display=this.style.display='none'?'':'none';
 
        if(obj.id=='a')
         {
            //alert(obj.id);
            obj.nextSibling.style.display=obj.nextSibling.style.display=='none'?'':'none';
         }
        
        if(obj.id=='b')
         {
              if(obj.parentNode.parentNode.rows[3].style.display=='none')
            {
              for(var i=obj.rowIndex+1;i<5;i++)
              { 
            obj.parentNode.parentNode.rows[i].style.display=obj.parentNode.parentNode.rows[i].style.display=='none'?'':'none';
             }
            }
           else
            {
              for(var i=obj.rowIndex+1;i<obj.parentNode.parentNode.rows.length;i++)
              { 
            obj.parentNode.parentNode.rows[i].style.display='none';
             }            }
             //alert(obj.parentNode.parentNode.rows[i].style.display);
         }
         if(obj.id=='c')
         {
            for(var i=obj.rowIndex+1;i<obj.parentNode.parentNode.rows.length;i++)
            obj.parentNode.parentNode.rows[i].style.display=obj.parentNode.parentNode.rows[i].style.display=='none'?'':'none';
         }
        
     }
}
</script></head>
<body bgcolor="#FFFFFF" marginheight="0" bgcolor="White">
<tr>
  <td valign="top" align="center"></p> 
    <table width="90%" border="1" cellspacing="0" cellpadding="3" id="tablehead" bordercolor="Black" class="IBTable">
      <tr class="IBTable_title" id='a'> 
        <td><div align="right">System ID</div></td>
        <td><div align="center">System Name</div></td>
        <td><div align="center">Site ID</div></td>
        <td><div align="center">Site Name</div></td>
        <td><div align="center">Inst System Service District</div></td>
        <td><div align="center">FDO Number</div></td>
      </tr>
      <tr style="display:none"> 
        <td nowrap><div align="right"> <span onclick="hide_onclick('3')" style="cursor:hand"><span onclick="innerText=innerText=='-'?'+':'-'">+</span> 
            </span></span> 600057US05 </div></td>
        <td><div align="center">&nbsp;</div></td>
        <td><div align="center">600057</div></td>
        <td><div align="center">VSEOBECNA FN</div></td>
        <td><div align="center">052</div></td>
        <td><div align="center">000000</div></td>
      </tr>
      <tr class="IBTable_title2" id='b'> 
        <td nowrap> <div align="right">Contract No</div></td>
        <td nowrap><div align="center">Type of Contract</div></td>
        <td nowrap><div align="center">Contract Start Date</div></td>
        <td nowrap><div align="center">Contract End Date</div></td>
        <td nowrap><div align="center">Syst Current Install Date</div></td>
        <td nowrap><div align="center">Warranty Flag</div></td>
      </tr>
      <tr bgcolor="#C1FFC1" id="con3" style="display:none"> 
        <td nowrap bgcolor="#C1FFC1"> <div align="right"> <span onclick="hide_onclick('3','1')" style="cursor:hand"><span onclick="innerText=innerText=='-'?'+':'-'">+</span></span></span> 
            537488</div></td>
        <td> <div align="center">WM</div></td>
        <td> <div align="center">2/9/2004</div></td>
        <td> <div align="center">1/9/2005</div></td>
        <td> <div align="center">2/9/2004</div></td>
        <td> <div align="center">X</div></td>
      </tr>
      <tr class="IBTable_title2" id='c'  style="display:none"> 
        <td nowrap bgcolor="#DFFFDF">&nbsp;</td>
        <td><div align="center">Serial No</div></td>
        <td><div align="center">SHORT GIB USN</div></td>
        <td><div align="center">Generic Product Code</div></td>
        <td colspan="2"><div align="center">Generic Product Description</div></td>
      </tr>
      <tr id="cmp3" style="display:none"> 
        <td nowrap bgcolor="#DFFFDF">&nbsp;</td>
        <td bgcolor="#DFFFDF"> <div align="center">60198</div></td>
        <td bgcolor="#DFFFDF"> <div align="center">280182</div></td>
        <td bgcolor="#DFFFDF"> <div align="center">11859A</div></td>
        <td colspan="2" bgcolor="#DFFFDF"> <div align="center">TUBE MS 740 200</div></td>
      </tr>
      <tr id="cmp3" style="display:none"> 
        <td nowrap bgcolor="#DFFFDF">&nbsp;</td>
        <td bgcolor="#DFFFDF"> <div align="center">8870</div></td>
        <td bgcolor="#DFFFDF"> <div align="center">280182</div></td>
        <td bgcolor="#DFFFDF"> <div align="center">12630A</div></td>
        <td colspan="2" bgcolor="#DFFFDF"> <div align="center">POTTER PHILIPS</div></td>
      </tr>
      <tr bgcolor="#C1FFC1" id="con3" style="display:none"> 
        <td nowrap bgcolor="#C1FFC1"> <div align="right"> 2535241</div></td>
        <td> <div align="center">WM</div></td>
        <td> <div align="center">1/1/2004</div></td>
        <td> <div align="center">31/12/2030</div></td>
        <td> <div align="center">1/1/2004</div></td>
        <td> <div align="center">X</div></td>
      </tr>
      <tr style="display:none"> 
        <td nowrap><div align="right"> 600057US06 </div></td>
        <td><div align="center">&nbsp;</div></td>
        <td><div align="center">600057</div></td>
        <td><div align="center">VSEOBECNA FN</div></td>
        <td><div align="center">052</div></td>
        <td><div align="center">000000</div></td>
      </tr>
      <tr style="display:none"> 
        <td nowrap><div align="right"> 600045CT01 </div></td>
        <td><div align="center">&nbsp;</div></td>
        <td><div align="center">600045</div></td>
        <td><div align="center">VSEOBECNA FN - NEUROLOGIE</div></td>
        <td><div align="center">052</div></td>
        <td><div align="center">064170</div></td>
      </tr>
    </table>

解决方案 »

  1.   

    thanks vivianfdlpw() 不过我要的不是这个效果
    主要是 contract NO是属于某个system id下面的内容
    有些system id有contract no
    有些没有serial no是属于contract no下面的内容
    有些contract no下面有,有些没有.
      

  2.   

    <style>
    .IBTable
    {
        BORDER-RIGHT: gray thin;
        BORDER-TOP: gray thin;
        FONT-SIZE: 8pt;
        BORDER-LEFT: gray thin;
        COLOR: black;
        BORDER-BOTTOM: gray thin;
        FONT-FAMILY: Arial;
        BACKGROUND-COLOR: palegreen
    }
    .IBTable_title
    {
        BORDER-RIGHT: black thin;
        BORDER-TOP: black thin;
        FONT-WEIGHT: bolder;
        FONT-SIZE: 8pt;
        BORDER-LEFT: black thin;
        COLOR: blue;
        BORDER-BOTTOM: black thin;
        FONT-FAMILY: Arial;
        BACKGROUND-COLOR: yellow
    }
    .IBTable_title2
    {
        BORDER-RIGHT: black thin;
        BORDER-TOP: black thin;
        FONT-WEIGHT: bolder;
        FONT-SIZE: 8pt;
        BORDER-LEFT: black thin;
        COLOR: blue;
        BORDER-BOTTOM: black thin;
        FONT-FAMILY: Arial;
        BACKGROUND-COLOR: #FFFFAE
    }
    .IBTable_system_id
    {
        BORDER-RIGHT: medium none;
        BORDER-TOP: medium none;
        FONT-WEIGHT: bolder;
        BORDER-LEFT: medium none;
        CURSOR: hand;
        COLOR: blue;
        BORDER-BOTTOM: medium none
    }
    .IBTable_sub
    {
        BORDER-RIGHT: gray thin;
        BORDER-TOP: gray thin;
        DISPLAY: none;
        FONT-SIZE: 8pt;
        BORDER-LEFT: gray thin;
        BORDER-BOTTOM: gray thin;
        FONT-FAMILY: Arial;
        BACKGROUND-COLOR: paleturquoise
    }
    </style>
    <script LANGUAGE="javascript">
    function hide_onclick(index,con) {
    var allNode = document.all;
    for (var i=0; i<allNode.length; i++) {
    /*if(con == "1") {
    if (allNode[i].id == ("cmp"+index))
    allNode[i].style.display =
    (allNode[i].style.display) ? "" : "none"; } else {
    if (allNode[i].id == ("con"+index) || allNode[i].id == ("cmp"+index))
    allNode[i].style.display =
    (allNode[i].style.display) ? "" : "none";
    }*/
    if(con == "" || con == null) {
    if(allNode[i].id == "con"+index) {
    allNode[i].style.display = (allNode[i].style.display) ? "" : "none";
    }
    if (allNode[i].id == "cmp"+index) {
    allNode[i].style.display = "none";
    }
    } else {
    if (allNode[i].id == "cmp"+con) {
    allNode[i].style.display = (allNode[i].style.display) ? "" : "none";
    }
    }
    }
    }
    window.onload=function() {
    var allNode = document.all;
    for (var i=0; i<allNode.length; i++) {
    if(allNode[i].id.substr(0,3) == "con" || allNode[i].id.substr(0,3) == "cmp") {
    allNode[i].style.display = "none";
    }
    }
    }
    </script>
    </head>
    <body bgcolor="#FFFFFF" marginheight="0" bgcolor="White">
    <tr>
      <td valign="top" align="center"></p> 
        <table width="90%" border="1" cellspacing="0" cellpadding="3" id="tablehead" bordercolor="Black" class="IBTable">
          <tr class="IBTable_title"> 
            <td><div align="right">System ID</div></td>
            <td><div align="center">System Name</div></td>
            <td><div align="center">Site ID</div></td>
            <td><div align="center">Site Name</div></td>
            <td><div align="center">Inst System Service District</div></td>
            <td><div align="center">FDO Number</div></td>
          </tr>
          <tr> 
            <td nowrap><div align="right"> <span onclick="hide_onclick('1')" style="cursor:hand"><span onclick="innerText=innerText=='-'?'+':'-'">+</span> 
                </span></span> 1111111111 </div></td>
            <td><div align="center">&nbsp;</div></td>
            <td><div align="center">600057</div></td>
            <td><div align="center">VSEOBECNA FN</div></td>
            <td><div align="center">052</div></td>
            <td><div align="center">000000</div></td>
          </tr>
          <tr class="IBTable_title2" id="con1"> 
            <td nowrap> <div align="right">Contract No</div></td>
            <td nowrap><div align="center">Type of Contract</div></td>
            <td nowrap><div align="center">Contract Start Date</div></td>
            <td nowrap><div align="center">Contract End Date</div></td>
            <td nowrap><div align="center">Syst Current Install Date</div></td>
            <td nowrap><div align="center">Warranty Flag</div></td>
          </tr>
          <tr bgcolor="#C1FFC1" id="con1"> 
            <td nowrap bgcolor="#C1FFC1"> <div align="right"> <span onclick="hide_onclick('1','1')" style="cursor:hand"><span onclick="innerText=innerText=='-'?'+':'-'">+</span></span></span> 
                537488</div></td>
            <td> <div align="center">WM</div></td>
            <td> <div align="center">2/9/2004</div></td>
            <td> <div align="center">1/9/2005</div></td>
            <td> <div align="center">2/9/2004</div></td>
            <td> <div align="center">X</div></td>
          </tr>
          <tr class="IBTable_title2" id="cmp1"> 
            <td nowrap bgcolor="#DFFFDF">&nbsp;</td>
            <td><div align="center">Serial No</div></td>
            <td><div align="center">SHORT GIB USN</div></td>
            <td><div align="center">Generic Product Code</div></td>
            <td colspan="2"><div align="center">Generic Product Description</div></td>
          </tr>
          <tr id="cmp1"> 
            <td nowrap bgcolor="#DFFFDF">&nbsp;</td>
            <td bgcolor="#DFFFDF"> <div align="center">60198</div></td>
            <td bgcolor="#DFFFDF"> <div align="center">280182</div></td>
            <td bgcolor="#DFFFDF"> <div align="center">11859A</div></td>
            <td colspan="2" bgcolor="#DFFFDF"> <div align="center">TUBE MS 740 200</div></td>
          </tr>
          <tr id="cmp1"> 
            <td nowrap bgcolor="#DFFFDF">&nbsp;</td>
            <td bgcolor="#DFFFDF"> <div align="center">8870</div></td>
            <td bgcolor="#DFFFDF"> <div align="center">280182</div></td>
            <td bgcolor="#DFFFDF"> <div align="center">12630A</div></td>
            <td colspan="2" bgcolor="#DFFFDF"> <div align="center">POTTER PHILIPS</div></td>
          </tr>
        </table>
      

  3.   

    sorry litestar
    你发贴的时候,我刚好结贴去了,你的答案很好. :)
      

  4.   

    还有我的答案，呵呵，偶不要分了：
    用一下代码替换hide_onclick：
    function hide_onclick(index,con)
    {
    var allNode = document.all;
    if(con == "1")
    {
    SetControl("cmp"+index)
    }
    else
    {
    SetControl("con"+index)
    SetControl("cmp"+index,"none")
    }
    }function SetControl(ID,Visible){
    if (Visible!=undefined){
    for (var i=0;i<document.all(ID).length;i++) document.all(ID)(i).style.display=Visible;
    }
    else
    {
    for (var i=0;i<document.all(ID).length;i++)document.all(ID)(i).style.display=(document.all(ID)(i).style.display=="none") ? "" : "none";
    }
    }