在线等~~~ 关于 JS 操作 TABLE的TR 样式的问题...


<HTML>
<head>
<script language="javascript">
function showDetail(oSpan)
{
var iIndex = oSpan.parentNode.parentNode.rowIndex;
var oTbody = oSpan.parentNode.parentNode.parentNode;
if (oSpan.innerText == "+")
{
oTbody.rows[iIndex + 1].style.display = "";
oTbody.rows[iIndex + 2].style.display = "";
oTbody.rows[iIndex + 3].style.display = "";
oSpan.innerText = "-";
}
else
{
oTbody.rows[iIndex + 1].style.display = "none";
oTbody.rows[iIndex + 2].style.display = "none";
oTbody.rows[iIndex + 3].style.display = "none";
oSpan.innerText = "+";
}
}
</script>
</head>
<body>
<TABLE border=1>
<TBODY>
<TR id=1>
<TD rowSpan=20>&nbsp;</TD>
<TD rowSpan=20></TD>
<TD rowSpan=20>AAAAA</TD>
<TD>1&nbsp;VS&nbsp;2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=2 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=3 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=4 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=5>
<TD>1&nbsp;VS&nbsp;2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=6 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=7 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=8 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=9>
<TD>1&nbsp;VS&nbsp;3<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=10 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=11 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=12 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=13>
<TD>1&nbsp;VS&nbsp;4<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=14 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=15 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=16 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=17>
<TD>1&nbsp;VS&nbsp;5<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=18 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=19 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
<TR id=20 style="DISPLAY: none">
<TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
<TD>/</TD>
<TD>/</TD>
</TR>
</TBODY>
</TABLE>
</body>
</HTML>以上代码，当点击<span>中的+号时，会展开或收缩几行...这是通过控制display来实现的。
不过，现在有个问题 第一行中有rowSpan=20，当操作最后一行的display = none时，rowSpan就会失效...
求解决方法...

解决方案 »

  1.   

    当操作最后一行的display = none时，rowSpan就会失效这里不是失效，实际上当最后一个打开时才是正常的表格，你可以用ＤＩＶ去做，用表格是不太好控制的
      

  2.   

    谢谢了~可是必须目前...用table因为数据量远比上面的代码多的多~
      

  3.   

    多加一行,高度设置为0隐藏就行了。<HTML>
    <head>
        <script language="javascript">
        function showDetail(oSpan)
        {
            var iIndex = oSpan.parentNode.parentNode.rowIndex;
            var oTbody = oSpan.parentNode.parentNode.parentNode;
            if (oSpan.innerText == "+")
            {
                oTbody.rows[iIndex + 1].style.display = "";
                oTbody.rows[iIndex + 2].style.display = "";
                oTbody.rows[iIndex + 3].style.display = "";
                oSpan.innerText = "-";
            }
            else
            {
                oTbody.rows[iIndex + 1].style.display = "none";
                oTbody.rows[iIndex + 2].style.display = "none";
                oTbody.rows[iIndex + 3].style.display = "none";
                oSpan.innerText = "+";
            }
        }
        </script>
    </head>
    <body>
    <TABLE border=1>
    <TBODY>
        <TR id=1>
            <TD rowSpan=21>&nbsp;</TD>
            <TD rowSpan=21></TD>
            <TD rowSpan=21>AAAAA</TD>
            <TD>1&nbsp;VS&nbsp;2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=2 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=3 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=4 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=5>
            <TD>1&nbsp;VS&nbsp;2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=6 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=7 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=8 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=9>
            <TD>1&nbsp;VS&nbsp;3<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=10 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=11 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=12 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=13>
            <TD>1&nbsp;VS&nbsp;4<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=14 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=15 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=16 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=17>
            <TD>1&nbsp;VS&nbsp;5<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=18 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=19 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=20 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=21 style="DISPLAY: none" height=0>
            <TD></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
    </TBODY>
    </TABLE>
    </body>
    </HTML>
      

  4.   


        <TR id=21 style="DISPLAY: none" height=0>
            <TD></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>这个改成~    <TR id=21 height=0>
        </TR>这样就可以了吧...
    谢谢了~
      

  5.   

    <HTML>
    <head>
        <script language="javascript">
        function showDetail(oSpan)
        {
            var iIndex = oSpan.parentNode.parentNode.rowIndex;
            var oTbody = oSpan.parentNode.parentNode.parentNode;
            if (oSpan.innerText == "+")
            {
                oTbody.rows[iIndex + 1].style.display = "";
                oTbody.rows[iIndex + 2].style.display = "";
                oTbody.rows[iIndex + 3].style.display = "";
                oSpan.innerText = "-";
            }
            else
            {
                oTbody.rows[iIndex + 1].style.display = "none";
                oTbody.rows[iIndex + 2].style.display = "none";
                oTbody.rows[iIndex + 3].style.display = "none";
                oSpan.innerText = "+";
            }
        }
        </script>
    </head>
    <body>
    <table border=1>
    <tr>
    <td valign=top>
    <table border=1 height=20>
    <tr>
            <TD>&nbsp;</TD>
            <TD></TD>
            <TD>AAAAA</TD>
    </tr>
    </table>
    </td>
    <td>
    <TABLE border=1>
    <TBODY>
        <TR id=1>
            <TD>1&nbsp;VS&nbsp;2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=2 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=3 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=4 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=5>
            <TD>1&nbsp;VS&nbsp;2<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=6 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=7 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=8 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=9>
            <TD>1&nbsp;VS&nbsp;3<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=10 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=11 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=12 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=13>
            <TD>1&nbsp;VS&nbsp;4<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=14 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=15 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=16 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=17>
            <TD>1&nbsp;VS&nbsp;5<SPAN style="cursor:hand;" onclick="showDetail(this)">+</SPAN></TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=18 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;a</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=19 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;b</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
        <TR id=20 style="DISPLAY: none">
            <TD>&nbsp;&nbsp;&nbsp;&nbsp;c</TD>
            <TD>/</TD>
            <TD>/</TD>
        </TR>
    </TBODY>
    </TABLE>
    </td>
    </tr>
    </table></body>
    </HTML>这样行不行