创建悬浮表头

/**
 * 创建悬浮表头，具体使用方法参见 \dzjc\supervise\xzxk\lhjc\Query.jsp
 * p_titleRows 表格的表头的行数
 * p_theResultTable 悬浮表头的表格的ID
 */
function createAbsoluteTitleDiv(p_titleRows, p_theResultTable){
 var titleDivObj = MM_findObj('the_title_div');
 var resultTableObj = MM_findObj(p_theResultTable);

 titleDivObj.innerHTML = resultTableObj.outerHTML;
 titleDivObj.innerHTML = titleDivObj.innerHTML.replace(p_theResultTable,'the_div_table');
 titleDivObj.innerHTML = titleDivObj.innerHTML.ReplaceAll('id=','id_temp_xx=');
 titleDivObj.innerHTML = titleDivObj.innerHTML.ReplaceAll('name=','name_temp_xx=');
 titleDivObj.innerHTML = titleDivObj.innerHTML.replace('id_temp_xx="the_div_table"','id="the_div_table"');
 
 
 /*printOnPage('BEGIN...');
 printOnPage(titleDivObj.innerHTML);
 printOnPage('END...');*/
 
 var divTableObj = MM_findObj('the_div_table');
 var tableHeight = 0;
 for (var i = p_titleRows; i < divTableObj.rows.length; i++){
  var divRowObj = divTableObj.rows[i];
  divRowObj.style.visibility="hidden";
 }
 for (var i = 0; i < p_titleRows; i++){
  var divRowObj = divTableObj.rows[i];
  tableHeight += divRowObj.offsetHeight;
 } 
 titleDivObj.style.height = tableHeight + divTableObj.rows(0).offsetTop * (p_titleRows + 1);
 titleDivObj.style.width = resultTableObj.offsetWidth;
 divTableObj.style.width = resultTableObj.offsetWidth;
 // 滚动悬浮表头
 scrollAbsoluteTitleDiv(p_titleRows, p_theResultTable); 
}
 
/**
 * 滚动悬浮表头，具体使用方法参见 \dzjc\supervise\xzxk\lhjc\Query.jsp
 * p_titleRows 表格的表头的行数
 * p_theResultTable 悬浮表头的表格的ID
 */
function scrollAbsoluteTitleDiv(p_titleRows, p_theResultTable){
 var titleDivObj = MM_findObj('the_title_div');
 var resultTableObj = MM_findObj(p_theResultTable);  
 
 if (document.body.scrollTop > resultTableObj.offsetTop){   
  titleDivObj.style.visibility="visible";
  titleDivObj.style.top = document.body.scrollTop + "px";
  //alert(titleDivObj.offsetWidth);
  titleDivObj.style.left = resultTableObj.offsetLeft + "px";
 }
 else{
  titleDivObj.style.visibility="hidden";
 }
 
}

/**
 * 创建悬浮表头，具体使用方法参见 \public_html\dzjc\supervise\xzxk\jxcp\SubJxkf.jsp
 * p_titleRows 表格的表头的行数
 * p_theResultTable 悬浮表头的表格的ID
 */
function createAbsoluteHorizontalTitleDiv(p_titleCols, p_theResultTable, p_topRows, p_bottomRows){
 var titleDivObj = MM_findObj('the_HorizontalTitle_div');
 var resultTableObj = MM_findObj(p_theResultTable);

 titleDivObj.innerHTML = resultTableObj.outerHTML;
 titleDivObj.innerHTML = titleDivObj.innerHTML.replace(p_theResultTable,'the_div_HorizontalTable');
 titleDivObj.innerHTML = titleDivObj.innerHTML.ReplaceAll('id=','id_temp_xx=');
 titleDivObj.innerHTML = titleDivObj.innerHTML.ReplaceAll('name=','name_temp_xx=');
 titleDivObj.innerHTML = titleDivObj.innerHTML.replace('id_temp_xx="the_div_HorizontalTable"','id="the_div_HorizontalTable"');
 
 /*printOnPage('BEGIN...');
 printOnPage(titleDivObj.innerHTML);
 printOnPage('END...');*/
 
 var divTableObj = MM_findObj('the_div_HorizontalTable');
 //alert(divTableObj);
 var tableHeight = 0;
 var tableWidth = 0;
 var tableTop = 0;
 var thisTopRows = p_topRows;
 var firstRow = true;
 var thisCellSpacing = divTableObj.cellSpacing;
 
 
 for (var i = 0; i < divTableObj.rows.length; i++){
  var divRowObj = divTableObj.rows[i];
  if (i < thisTopRows){
   tableTop += divRowObj.offsetHeight;
   divTableObj.deleteRow(i);
   thisTopRows--;
   i--;
   continue;
  }
  if (i >= divTableObj.rows.length - p_bottomRows){
   divRowObj.style.visibility="hidden";
   continue;
  }
  for (var j = 0; j < divRowObj.cells.length; j++){
   var divCellObj = divRowObj.cells[j];
   if (j >= p_titleCols){
     divCellObj.style.visibility="hidden";    
   }
   else if(firstRow){
     tableWidth += divCellObj.offsetWidth;
    }
  }  
  firstRow = false;
  tableHeight += divRowObj.offsetHeight + parseInt(thisCellSpacing);// + divTableObj.cellSpacing;
 } 
 titleDivObj.style.width = tableWidth + divTableObj.rows(0).offsetLeft * (p_titleCols + 1);
 titleDivObj.style.top = tableTop + divTableObj.rows(0).offsetTop * (p_topRows )+5;
 titleDivObj.style.height = tableHeight;
 // 滚动悬浮表头
 scrollAbsoluteHorizontalTitleDiv(p_titleCols, p_theResultTable); 
}
 
/**
 * 滚动悬浮表头，具体使用方法参见 \public_html\dzjc\supervise\xzxk\jxcp\SubJxkf.jsp
 * p_titleRows 表格的表头的行数
 * p_theResultTable 悬浮表头的表格的ID
 */
function scrollAbsoluteHorizontalTitleDiv(p_titleRows, p_theResultTable){
 var titleDivObj = MM_findObj('the_HorizontalTitle_div');
 var resultTableObj = MM_findObj(p_theResultTable);  
 
 if (document.body.scrollLeft > resultTableObj.offsetLeft){   
  titleDivObj.style.visibility="visible";
  titleDivObj.style.left = document.body.scrollLeft + "px";
 }
 else{
  titleDivObj.style.visibility="hidden";
 }
 
}

 

JSP页面：

    <!-- 使用 absoluteTitleDiv 制作悬浮表头时需要在页面增加这部分DIV，主要是格式要和表格相同。开始 -->
 <div id="search">
 <div id="the_HorizontalTitle_div" style="position:absolute; visibility:hidden; width:100%;text-align:left;top:50px; left:10px;overflow:hidden" >
 </div>
</div>
<div id="search">
 <div id="the_title_div" style="position:absolute; visibility:hidden; width:100%;text-align:left;top:10px; left:10px;overflow:hidden" >
 </div>
</div>

<!-- 使用 absoluteTitleDiv 制作悬浮表头时需要在页面增加这部分DIV，主要是格式要和表格相同。结束 -->

 

<script language="javascript">
 <!-- 使用 absoluteTitleDiv 制作悬浮表头的JS。开始-->
 // 滚动本页面的悬浮表头
 function thisScrollAbsoluteTitleDiv(){
  scrollAbsoluteTitleDiv(4, 'xzzfsx_table');
  scrollAbsoluteHorizontalTitleDiv(2, 'xzzfsx_table');
 }
 // 创建本页面的悬浮表头
 function thisCreateAbsoluteTitleDiv(){
  createAbsoluteTitleDiv(4, 'xzzfsx_table');
  createAbsoluteHorizontalTitleDiv(2,'xzzfsx_table',1,0);
 }
 
 window.onscroll = thisScrollAbsoluteTitleDiv;  // 注册WINDOW的滚动事件
 window.onresize = thisCreateAbsoluteTitleDiv;  // 注册WINDOW的改变大小事件
 window.onload = thisCreateAbsoluteTitleDiv;  // 注册WINDOW的载入事件
 
 <!-- 使用 absoluteTitleDiv 制作悬浮表头的JS。结束-->
</script>