急问：JS如何展开某一项

例如，下面的例子，也是我程序的部分代码
<table>
<tr>
for ($i = 0; $i < count($oldinfo); $i++)
{
   <td width='10%' class='style10_r'>".$oldinfo[$i]['channelid']."</td>
   <td width='40%' class='style10_r'>".$timestr."</td>
   <td width='10%' class='style10_r'>".$oldinfo[$i]['period']."</td>
   <td width='10%' class='style10_r'>".$oldinfo[$i]['path']."</td>
   <td width='10%' class='style10_r'>".$oldinfo[$i]['state']."</td>
   <td width='10%' class='style10_r'>".$oldinfo[$i]['result']."</td>
}
</tr>
<table>
上面的程序段里面，有的比如$oldinfo[$i]['channelid']只有一个数字，但有的如$timestr有好几行，但有必须与前面的$oldinfo[$i]['channelid']一一对应显示在一行，如果这么显示的话肯定有的行特别宽，有的行比较窄，很难看，而且占很大空间。我想问的是，各位高手，有没有办法将$timestr显示第一行出来，如果鼠标点击它，再把其他部分也展开，请问这个如何做，非常感谢。

解决方案 »

  1.   

    不好意思，程序前忘记<?php ?>
      

  2.   

    看看是不是你要的效果？
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript">
            </script>
        </head>
        <script langeuage="javascript">
            function show(){
                for (var i = 0; i < 6; i++) {
                    document.getElementById('col' + i).style.display = 'block';
                }
            }
        </script>
        <body>
            <table>
                <col id="col0" style="display:none;">
                </col><col id="col1">
                </col><col id="col2" style="display:none;">
                </col><col id="col3" style="display:none;">
                </col><col id="col4" style="display:none;">
                </col><col id="col5" style="display:none;">
                </col>
                <tr>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['channelid']."</td>
                    <td width='40%' class='style10_r' onclick='show();'>".$timestr."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['period']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['path']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['state']." </td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['result']."</td>
                </tr>
                <tr>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['channelid']."</td>
                    <td width='40%' class='style10_r' onclick='show();'>".$timestr."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['period']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['path']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['state']." </td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['result']."</td>
                </tr>
                <tr>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['channelid']."</td>
                    <td width='40%' class='style10_r' onclick='show();'>".$timestr."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['period']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['path']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['state']." </td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['result']."</td>
                </tr>
                <tr>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['channelid']."</td>
                    <td width='40%' class='style10_r' onclick='show();'>".$timestr."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['period']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['path']."</td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['state']." </td>
                    <td width='10%' class='style10_r'>".$oldinfo[$i]['result']."</td>
                </tr>
            </table>
        </body>
    </html>
      

  3.   

    不是这个效果，不过很谢谢你，如果你能帮我改一下就真的十分感激了。
    比如刚开始最好这么显示：
    0    周一 0:00  --  周四 9:00  --  所有   5Min /home CH  Su如果我点击中间的红色，会进行展开，如下：
    0    周一 0:00  --  周四 9:00  --  所有   5Min /home CH  Su
         周四10:00  --  周日24:00  --  所有                                
         周五10:00  --  周五24:00  --  所有 
         周六10:00  --  周六24:00  --  所有
         周日10:00  --  周日24:00  --  所有
      

  4.   

    只要设定一下col的 display式样就可以了.
    挺简单的.
    抱歉,现在没有时间,
    晚上回家后,
    你如果还没有解决的话,
    我再帮你做改改.
      

  5.   

    这里".$timestr." 这个我想问你他是什么形式的数据？
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript">
            </script>
        </head>
        <script langeuage="javascript">
            function show(obj){
                var o = obj.parentNode;
                var n = o.name;
                
                var s = (o.getAttribute("state") == "block") ? "none" : "block";
                o.setAttribute("state", s);
                
                var a = document.getElementsByTagName("tr");
                for (var i = 0; i < a.length; i++) {
                    if (a[i].name == n + "_sub") {
                        a[i].style.display = s;
                    }
                }
            }
        </script>
        <body>
            <table>
                <col width="20"><col width="400" style="color:red;"">
                <col width="200">
                <tr name="tr1" state="none">
                    <td>
                        0
                    </td>
                    <td onclick="show(this);">
                        周一 0:00  --  周四 9:00  --  所有
                    </td>
                    <td>
                        5Min /home CH  Su
                    </td>
                </tr>
                <tr name="tr1_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周四10:00  --  周日24:00  --  所有
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr1_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周五10:00  --  周五24:00  --  所有 
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr1_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周六10:00  --  周六24:00  --  所有 
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr1_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周日10:00  --  周日24:00  --  所有
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr2" state="none">
                    <td>
                        1
                    </td>
                    <td onclick="show(this);">
                        周一 0:00  --  周四 9:00  --  所有
                    </td>
                    <td>
                        5Min /home CH  Su
                    </td>
                </tr>
                <tr name="tr2_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周四10:00  --  周日24:00  --  所有
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr2_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周五10:00  --  周五24:00  --  所有 
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr2_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周六10:00  --  周六24:00  --  所有 
                    </td>
                    <td>
                    </td>
                </tr>
                <tr name="tr2_sub" style="display:none;">
                    <td>
                    </td>
                    <td>
                        周日10:00  --  周日24:00  --  所有
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </body>
    </html>