通过JavaScript自动生成页面元素设置样式问题？


<html>
<head>
<title>-- Chat --</title>
<SCRIPT type="text/javascript" src="jquery-1.4.1.js">
</SCRIPT>
</head>
<body>
<h3>Chat Frame</h3>
<div style="width: 950px;">
<hr />
<table width="100%">
<tr>
<td width="15%">
<table width="100%" align="center">
<tr><td width="100%"><div id="departments">
<a href="#" onclick="showStaffList('department3')"><h2>department3</h2></a>  
<div style="display:none" id="department3">
<a href="#" id="staff9" ondblclick="showChatWindow('staff9')">Benjamin</a>
<br>
<a href="#" id="staff10" ondblclick="showChatWindow('staff10')">Barton</a>
<br>
<a href="#" id="staff11" ondblclick="showChatWindow('staff11')">Bartholomew</a>
<br>
<a href="#" id="staff12" ondblclick="showChatWindow('staff12')">Blithe</a>
</div>
</div></td></tr>
</table>
</td>
<td width="85%" style="background-color:#ccee99">
<DIV id="condiv" style="width: 800px">
</DIV>
</td>
</tr>
</table>
<hr />
<div style="width: 100%" id="chatWindows"><h1>there is chat window</h1></div>
</body>
<script type="text/javascript">
function showStaffList(id){
var obj = $("#"+id);
if(obj.css("display")=="none"){
obj.css('display','block');
}else{
obj.css("display","none");
}
}
function showChatWindow(id){
var windowId = "#"+id+'window';
var obj = $(windowId);
if(obj.length>0){
if(obj.css("style")=="none"){
obj.css("style","block");
}else{
alert(obj);
obj.css("style","block");
}
}else{
createChatInterfase(id);
}
}
function createChatInterface(id){
var windowId = id+'window';
var histroyId = id+'history';
var contentId = id+'content';
var windowDiv = $("#chatWindows");
var newDIV = $("<div>");
newDIV.attr("id",windowId);
newDIV.css({width: "305px","background-color": "#ccee99"});
var subDIV = $("<div>");
subDIV.attr("id",histroyId);
subDIV.css({width: "300px",height:" 220px","background-color":"#eeeedd"});
var text = $("<textarea>");
text.attr({cols:"34",rows:"2",id:contentId});
var closeButton = $("<input>");
closeButton.attr({type:"button",value:"close"});
closeButton.bind("click",{windowId:windowId},hideChatWindow);  
var sendButton = $("<input>");
sendButton.attr({type:"button",value:"send"});
newDIV.append(subDIV);
newDIV.append(text);
newDIV.append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
newDIV.append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
newDIV.append(closeButton);
newDIV.append("&nbsp;&nbsp;&nbsp;&nbsp;");
newDIV.append(sendButton);
windowDiv.append(newDIV);
windowDiv.append("<br>");
}
function hideChatWindow(event){
var windowId = event.data.windowId;
var obj = $("#"+windowId);
obj.css("display","none");
}
</script>
</html>
<!--该页面运行之后出现一个Department3的一级菜单，点击之后出现二级菜单（员工列表），双击员工名字之后
    调用showChatWindow()方法浮出一个DIV，该div是我通过js方法(createChatInterface)自动生成的，生成的
    这个DIV它有个子元素，closeButton我给他添加了一个Onclick事件，并且通过这个事件调用hideChatWindow
    方法隐藏改DIV，我是通过操作样式的display="none"实现的，但是当我再次单击相同员工名字的时候，按照
    逻辑它得到该DIV得display应该是none，但是他什么都得不到，既不是block也不是none，这样也算了，因为
    无论他的display是什么我都给他赋值为block，通过这样我想让这个DIV再次显示出来，但是我能赋值他却还
    显示不了，哎痛苦呀！-->

解决方案 »

  1.   


    <body> 
    <h3>Chat Frame </h3> 
    <div style="width: 950px;"> 
        <hr /> 
        <table width="100%"> 
        <tr> 
            <td width="15%"> 
                <table width="100%" align="center"> 
                <tr> 
                <td width="100%"> 
                <div id="departments"> 
                 <a href="#" onclick="showStaffList('department3')"> <h2>department3 </h2> </a>  
                    <div style="display:none" id="department3"> 
                        <a href="#" id="staff9" ondblclick="showChatWindow('staff9')">Benjamin </a> 
                        <br> 
                        <a href="#" id="staff10" ondblclick="showChatWindow('staff10')">Barton </a> 
                        <br> 
                        <a href="#" id="staff11" ondblclick="showChatWindow('staff11')">Bartholomew </a> 
                        <br> 
                        <a href="#" id="staff12" ondblclick="showChatWindow('staff12')">Blithe </a> 
                    </div> 
                </div> 
                </td> 
                </tr> 
                </table> 
    </td> 
    <td width="85%" style="background-color:#ccee99"> 
            <DIV id="condiv" style="width: 800px"> 
            </DIV> 
    </td> 
    </tr> 
    </table> 
    <hr /> 
    <div style="width: 100%" id="chatWindows"> <h1>there is chat window </h1> 
        </div> 
    </div>  '此处少了个结束DIV 要有好的缩进习惯.... 
    </body>
      

  2.   

    看你的代码真痛苦...
    function showChatWindow(id){ 
    var windowId = "#"+id+'window'; 
    var obj = $(windowId); 
    if(obj.length>0){ 
    if(obj.css("style")=="none"){ 
    obj.css("style","block"); 
    }else{ 
    alert(obj); 
    obj.css("style","block"); 
    } 
    }else{ 
    createChatInterfase(id); 
    } 
    } 
      

  3.   

    看你的代码真痛苦啊！~~
    你能不能把错误的代码贴出来啊
    你的表格和div太多，你应该用贴出来
    这样看的比较清晰