div的使用

1.div显示在屏幕中央。
<div style="display:none;position:absolute;background-color:#FFFFFF;width:70%;z-index:1;border:1px gray solid;" id="historyDiv">
 <table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" >
  <tr >
   <td height="25" background="/img/m-bt-bg01.gif"  style="background-repeat:no-repeat;background-position:right">
    <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
      <td width="2%" height="24"><img src="/img/dian-1.gif" width="6" height="6" /></td>
      <td width="48%" class="btn02">&nbsp;&nbsp;&nbsp;&nbsp;<fmt:message key="bug.html.issue.history"/></td>
      <td width="50%" align="right"><span class="text4">
      </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
     </tr>
    </table>
   </td>
  </tr>
  <tr >
   <td valign="top"  >
    <display:table name="issue.historyRecord" class="simple" requestURI="" id="historyRecord" export="false" >
     <display:column property="actionUser.username"  titleKey="bug.html.issue.actor"  />  
     <display:column   titleKey="bug.html.issue.status">
      <appfuse:label  dictKey="issueStatus"  codeNo="${historyRecord.status }" />
     </display:column>
     <display:column property="actionTime"  titleKey="bug.html.issue.actionTime"  format="{0,date,yyyy-MM-dd HH:mm}" /> 
     <display:column property="actionDescription"  titleKey="bug.html.issue.actionDescription" maxLength="20" />
    </display:table>
   </td>
  </tr>
 </table>
</div>
*********************javascript********************************
    var historyDiv=document.getElementById("historyDiv");
    historyDiv.style.display="block";
    historyDiv.style.left=(document.body.clientWidth - historyDiv.clientWidth)/2 + document.body.scrollLeft;
    historyDiv.style.top=(document.body.clientHeight - historyDiv.clientHeight)/ 2+ document.body.scrollTop;
2.点击非div区域隐藏
div同上边代码
*********************javascript********************************
   function addListener(element,e,fn){
        if(element.addEventListener){
          element.addEventListener(e,fn,false);
        } else {
          element.attachEvent("on" + e,fn);
        }
   }
  
   addListener(document,"click",function(evt){
          var evt = window.event?window.event:evt,target=evt.srcElement||evt.target;
          while(target.nodeName.toLowerCase() != "div" && target.nodeName.toLowerCase() != "html"){
                target = target.parentNode;        
          }
         if(target.id != "historyDiv"){
            document.getElementById("historyDiv").style.display = "none";
         }          
   })
3.div的展开与折叠
<div id="sysDiv0" style="height:30px;overflow:hidden;">
 <table width="100%" border="1" cellspacing="0" cellpadding="1" bordercolor="ffffff" bordercolordark="#ffffff" bordercolorlight="B9B9B9"> 
  <tr align="center">
   <td width="20%" height="28" bgcolor="#EFEFEF">系统需求编号</td>
   <td width="30%" height="28" align="left">SLR-00001</td>
   <td width="20%" bgcolor="#EFEFEF">作者</td>
   <td width="30%" height="28"  align="left">
    <span style="float:left" id="sysSpan0.creator">swang_项目负责人</span>
    <span style="float:right" id="sysSpan0" οnclick="shoppingcat('sysDiv0','sysSpan0');"  title="open"><img src="./images/down.png"/></span>
   </td>
  </tr>
  <tr align="center">
   <td width="20%" height="28"bgcolor="#EFEFEF">系统需求名称</td>
   <td  height="28"  align="left" colspan="3">
    <span  id="sysSpan0.name">系统需求</span>  
   </td>
  </tr>
 </table>
</div>
*********************javascript********************************
 function shoppingcat(div,span){
  var key = document.getElementById(span).title;
  if(key=="open"){
   document.getElementById(span).title="close";
   document.getElementById(span).innerHTML= "<img src='./images/up.png'/>";
   document.getElementById(div).style.cssText  = "overflow:block;";
  }else{
   document.getElementById(span).title="open";
   document.getElementById(span).innerHTML= "<img src='./images/down.png'/>";
   document.getElementById(div).style.cssText  = "height:30px;overflow:hidden;";
  }
 }
4.div的子集合的删除
<div id="selectedResult" style="height:350;overflow:auto;z-index:1;"></div>   ---->高于350px,在Y轴自动出现滚动条.

$('#selectedResult').append(  "<div id=" + json.id +"><input type='checkbox' name='selected' value='" + json.id + "'>"+ json.id + " : " + json.name +"</div>"  );   --->div中添加子div

  var divs = document.getElementById("selectedResult").getElementsByTagName("div");
  var m = divs.length;
  for(var n=0; n< m ; n++){
   document.getElementById("selectedResult").removeChild(divs[0]);
  }
  或者
  $('#selectedResult').empty();
5.利用div实现回车
 <div style="border:0px;overflow:auto;word-break:break-all;">${highLevelRequirement.name }&nbsp;</div>