td 下 onclick 为啥没起作用呢？谢谢。

我动态生成了如下HTML代码。其中td 的onclick事件，希望能起到 展开或隐藏的效果，
但是却没起到作用，请教高手，谢谢。
<html>
<body>
<style>*{font-size:14px;}td{white-space:nowrap;}</style>
<style>td {border:1 solid #d2e0f0;text-align:center;}table {width:90%;height:180;border-collapse:collapse;border:1 solid #d2e0f0;}</style>
<script> function show(menu1)
{ var dv=document.getElementById(menu1); 
if(dv.style.display==""){ dv.style.display="none";}
else{ dv.style.display="";}}
</script><br>
<Table border="0"  align="center"><tr><td colspan="5" bgcolor="#d2e0f0">2010年5月11日办结事宜统计</td></tr>
<tr><td><strong>1</strong></td>
<td onclick=show("div3877")  colspan="4"><strong><font color = blue>A304礼品申请-杨-2010-05-11 test</font></strong>  
 <a href = http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank>详细</a></td></tr><div id = div3877><tr><td>&nbsp;&nbsp;1.3</td>
<td>礼品专员:</td><td>胡</td><td></td><td>2010-05-11  09:15:17</td></tr><tr><td>&nbsp;&nbsp;1.2</td>
<td>部门领导:</td><td>林->杨</td><td>test1</td><td>2010-05-11  09:14:56</td></tr><tr><td>&nbsp;&nbsp;1.1</td><td>申请人:</td><td>杨</td><td></td><td>2010-05-11  09:13:56</td></tr></tr></div></Table><br>OA系统 智能提醒计划任务(不需要回复邮件)<br>2010-5-11 9:22:37</body></html>

解决方案 »

  1.   

    看代码，原理上是没问题
    楼主，你最好要注意一下双引号的问题
    比如<div id = div3877> 改成 <div id="div3877">
    onclick=show("div3877") 改成　onclick="show('div3877')" 
    先改完再来试
      

  2.   

    <tr>后面只能是<td>标签
    可以这样该，具体单元格宽度还要再设置一下<html>
    <body>
    <style>*{font-size:14px;}td{white-space:nowrap;}</style>
    <style>td {border:1 solid #d2e0f0;text-align:center;}table {width:90%;height:180;border-collapse:collapse;border:1 solid #d2e0f0;}</style>
    <script> function show(menu1)
    { var dv=document.getElementById(menu1);
    if(dv.style.display==""){ dv.style.display="none";}
    else{ dv.style.display="";}}
    </script><br>
    <Table border="0"  align="center"><tr><td colspan="5" bgcolor="#d2e0f0">2010年5月11日办结事宜统计</td></tr>
    <tr><td><strong>1</strong></td>
    <td onclick=show("div3877")><strong><font color = blue>A304礼品申请-杨-2010-05-11 test</font></strong>  
     <a href = http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank>详细</a>
    </td>
    </tr>
    <tr>
    <td colspan="2">
    <table id="div3877"><tr>&nbsp;&nbsp;1.3</td>
    <td>礼品专员:</td><td>胡</td><td></td><td>2010-05-11  09:15:17</td></tr><tr><td>&nbsp;&nbsp;1.2</td>
    <td>部门领导:</td><td>林->杨</td><td>test1</td><td>2010-05-11  09:14:56</td></tr><tr><td>&nbsp;&nbsp;1.1</td><td>申请人:</td><td>杨</td><td></td><td>2010-05-11  09:13:56</td>
    </tr></table>
    </td>
    </tr></Table><br>OA系统 智能提醒计划任务(不需要回复邮件)<br>2010-5-11 9:22:37</body></html>
      

  3.   


    <html>
    <body>
    <style>
    *{font-size:14px;}
    td{white-space:nowrap;}
    td {border:1 solid #d2e0f0;text-align:center;}
    table {width:90%;height:180;border-collapse:collapse;border:1 solid #d2e0f0;}
    </style>
    <br>
    <Table border="0"  align="center"><tr><td colspan="5" bgcolor="#d2e0f0">2010年5月11日办结事宜统计</td></tr>
    <tr><td><strong>1</strong></td>
    <td onclick="show('div3877');" style="height:30px;"  colspan="4">
        <strong><font color = blue>A304礼品申请-杨-2010-05-11 test</font></strong>  
        <a href = http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank>详细</a>
    </td></tr><tr id = "div3877" style="display:none">
    <td>&nbsp;&nbsp;1.3</td>
    <td>礼品专员:</td><td>胡</td><td></td><td>2010-05-11  09:15:17</td></tr><tr><td>&nbsp;&nbsp;1.2</td>
    <td>部门领导:</td><td>林->杨</td><td>test1</td><td>2010-05-11  09:14:56</td></tr><tr><td>&nbsp;&nbsp;1.1</td><td>申请人:</td><td>杨</td><td></td><td>2010-05-11  09:13:56</td></tr></tr></Table><script> 
    function show(menu1){ 
    var dv=document.getElementById(menu1); 
    if(dv.style.display==""){ dv.style.display="none";}
    else{ dv.style.display="";}
    }
    </script><br>OA系统 智能提醒计划任务(不需要回复邮件)<br>2010-5-11 9:22:37</body></html>
      

  4.   

    HTML代码要标准，属性要用引号，标签不能随便嵌套<html>
    <body>
    <style>*{font-size:14px;}td{white-space:nowrap;}</style>
    <style>td {border:1 solid #d2e0f0;text-align:center;}table {width:90%;height:180;border-collapse:collapse;border:1 solid #d2e0f0;}</style>
    <script>
    function show(menu1){
    var i=0, dv;
    dv=document.getElementById(menu1+"_"+i);
    while(dv){
      dv.style.display = dv.style.display==""?"none":"";
      i++;
      dv=document.getElementById(menu1+"_"+i);
    }
    }
    </script><br>
    <Table border="0"  align="center"><tr><td colspan="5" bgcolor="#d2e0f0">2010年5月11日办结事宜统计</td></tr>
    <tr><td><strong>1</strong></td>
    <td onclick="show('div3877')" colspan="4"><strong><font color = "blue">A304礼品申请-杨-2010-05-11 test</font></strong>  
    <a href ="http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877" target ="_blank">详细</a></td></tr>
    <tr id="div3877_0"><td>&nbsp;&nbsp;1.3</td>
    <td>礼品专员:</td><td>胡</td><td></td><td>2010-05-11  09:15:17</td></tr>
    <tr id="div3877_1"><td>&nbsp;&nbsp;1.2</td>
    <td>部门领导:</td><td>林->杨</td><td>test1</td><td>2010-05-11  09:14:56</td></tr>
    <tr id="div3877_2"><td>&nbsp;&nbsp;1.1</td><td>申请人:</td><td>杨</td><td></td><td>2010-05-11  09:13:56</td></tr>
    </Table>
      

  5.   


    <html>
        <body>
            <style>
                * {
                    font-size: 14px;
                }
                
                td {
                    white-space: nowrap;
                }
            </style>
            <style>
                td {
                    border: 1 solid #d2e0f0;
                    text-align: center;
                }
                
                table {
                    width: 90%;
                    height: 180;
                    border-collapse: collapse;
                    border: 1 solid #d2e0f0;
                }
            </style>
            <script>
                function show(menu1){
                    var dv = document.getElementById(menu1);
                    dv = dv.tBodies[1];
                    if (dv.style.display == "") {
                        dv.style.display = "none";
                    }
                    else {
                        dv.style.display = "";
                    }
                }
            </script>
            <br>
            <Table border="0" align="center" id="div3877">
             <tbody>
                <tr>
                    <td colspan="5" bgcolor="#d2e0f0">
                        2010年5月11日办结事宜统计
                    </td>
                </tr>
                <tr>
                    <td>
                        <strong>1</strong>
                    </td>
                    <td onclick="show('div3877')"  colspan="4">
                        <strong>
                            <font color = blue>
                                A304礼品申请-杨-2010-05-11 test
                            </font>
                        </strong>
                        <a href = http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank>详细</a>
                    </td>
                </tr>
              </tbody>
              <tbody>
                <tr>
                    <td>
                        &nbsp;&nbsp;1.3
                    </td>
                    <td>
                        礼品专员:
                    </td>
                    <td>
                        胡
                    </td>
                    <td>
                    </td>
                    <td>
                        2010-05-11  09:15:17
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;&nbsp;1.2
                    </td>
                    <td>
                        部门领导:
                    </td>
                    <td>
                        林->杨
                    </td>
                    <td>
                        test1
                    </td>
                    <td>
                        2010-05-11  09:14:56
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;&nbsp;1.1
                    </td>
                    <td>
                        申请人:
                    </td>
                    <td>
                        杨
                    </td>
                    <td>
                    </td>
                    <td>
                        2010-05-11  09:13:56
                    </td>
                </tr>
                </tr>
            </tbody>
            </Table>
            <br>
            OA系统 智能提醒计划任务(不需要回复邮件)
            <br>
            2010-5-11 9:22:37
        </body>
    </html>
    <!-- 我修改了你的HTML 代码的结构，添加了tbody。小结：只有td之间才能存放其它节点。 -->
      

  6.   


    <!-- 一开始我也想过类似于 5 楼的方法，不够我想的是利用table的 rows 这个数组，
    判断rows.length > 1 (即这个table的第三行开始全部隐藏。)觉得这么做有些啰嗦，不如用table自己
    的 tbody 来做。一个table内允许放置多个tbody，捕捉到table的引用之后，利用document.getElementById(tableId).tbodies[i] 可以控制任意的tbody 块 -->
      

  7.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <style></style>
    <script src="jquery-1.3.2.js"></script>
    <script>
    $(function(){

    });
    </script>
    </head><body>
    <style>
    *{
    font-size:14px;
    }
    td{
    white-space:nowrap;
    }
    td {
    border:1 solid #d2e0f0;
    text-align:center;
    }
    table{
    width:90%;
    height:180;
    border-collapse:collapse;
    border:1 solid #d2e0f0;
    }
    </style>
    <script> 
    function show(menu1){
    var dv=document.getElementById(menu1); 
    if(dv.style.display==" "){
    //document.getElementById("div3877").style.display  = "none";
    dv.style.display = "none";
    }else{ 
    dv.style.display="block";
    }
    }
    </script><br>
    <Table border="0"  align="center"><tr>
    <td colspan="5" bgcolor="#d2e0f0">2010年5月11日办结事宜统计</td>
    </tr>
    <tr>
    <td><strong>1</strong></td>
    <td onclick=show("div3877")  colspan="4">
         <strong><font color = blue>A304礼品申请-杨-2010-05-11 test</font></strong>  
      <a href = http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank>详细</a>
        </td>
    </tr><tbody id = "div3877">
        <tr>
            <td>&nbsp;&nbsp;1.3</td>
            <td>礼品专员:</td><td>胡</td><td></td><td>2010-05-11  09:15:17</td>
        </tr>
        <tr>
         <td>&nbsp;&nbsp;1.2</td>
            <td>部门领导:</td>
            <td>林->杨</td>
            <td>test1</td>
            <td>2010-05-11  09:14:56</td>
         </tr>
         <tr>
          <td>&nbsp;&nbsp;1.1</td>
            <td>申请人:</td>
            <td>杨</td>
            <td></td>
            <td>2010-05-11  09:13:56</td>
         </tr>
    </tbody>
    </Table><br>OA系统 智能提醒计划任务(不需要回复邮件)<br>2010-5-11 9:22:37
    </body>
    </html>div 是无法控制tr的，只能用table或者tbody这样的标签，不是所有的标签都可以在外面包上一个就可以的
      

  8.   


    谢谢大家回复。
    改成 tdbody  并把divid加上引号后，果然IE下展开收缩测试成功。。不过我的 HTMl代码是嵌入到邮箱内容里的。
    outlook好像不支持JS代码了，展开收缩功能无效，请教大家有好办法不？谢谢大家
      

  9.   

    onclick=show("div3877")换成onclick="show("div3877")"
    id = div3877换成id = "div3877"
     href = http://XXXXX/login/Lo
    gin.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank换成 href = "http://XXXXX/login/Login.jsp?gopage=/workflow/request/ViewRequest.jsp?requestid=3877 target = _blank"