表格行的现实与隐藏

下面的代码中如果TR得display为NONE或干脆什么都不写，那么点一下按钮就会使该行在显示与隐藏之间切换一下，但如果为BLOCK，那么点击第二下才使该行隐藏，第一次没有反应，请问代码应该怎么样修改啊！！
<!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=gb2312" />
<title>www.52css.com</title><script type="text/javascript">
function he(){


if(!document.getElementById("line1").style.display==""){
document.getElementById("line1").style.display="";
}else{
document.getElementById("line1").style.display="none";
}
}
</script>
</head>
<body>
<table>
<tr id="line1" style="display:block;">
<td>
aa
</td>
    <td>
aa
</td>
</tr>
<tr>
<td>
bb
</td>
    <td>
bb
</td>
</tr>
<tr>
<td>
cc
</td>
    <td>
cc
</td>
</tr>
</table><input type="button" id="b1" value="hidden" onclick="he()">
</body>
</html>

解决方案 »

  1.   

    <!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=gb2312" />
    <title>www.52css.com</title><script type="text/javascript">
    function he(){
        
        
        if(document.getElementById("line1").style.display=="none"){
        document.getElementById("line1").style.display="block";
        }else{
        document.getElementById("line1").style.display="none";
        }
    }
    </script>
    </head>
    <body>
    <table>
    <tr id="line1" style="display:block;">
        <td>
            aa
        </td>
        <td>
            aa
        </td>
    </tr>
    <tr>
        <td>
            bb
        </td>
        <td>
            bb
        </td>
    </tr>
    <tr>
        <td>
            cc
        </td>
        <td>
            cc
        </td>
    </tr>
    </table><input type="button" id="b1" value="hidden" onclick="he()">
    </body>
    </html>