冻结HTML表中的标题行:在Firefox中有效，但在IE中不可用 [英] Freeze header rows in HTML table: Works in Firefox but not IE
本文介绍了冻结HTML表中的标题行:在Firefox中有效，但在IE中不可用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在第一个表中使用div，它是div style ="height:100％;溢出:auto;".在第二张表中，我调用js函数:
table style ="width:100％;" class ="FloatTitle".这是一个包含文件:tablefloatertitle.js.然后，我使用thead和tbody标签.它在firefox中完美运行，但在IE中则不行.我必须在.asp页或.js文件中进行哪些更改才能使其在Firefox和IE中正常工作.
这是我的.js文件代码
I need to use a div in my first table which is div style="height:100%; overflow:auto; ". In my second table I call the js function:
table style="width:100%;" class="FloatTitle". This is a include file: tablefloatertitle.js. Then I make use of the thead and tbody tags. It work perfectly in firefox but not in IE. What must I change in my .asp page or the .js file to make it work in firefox and IE.
Here is my .js file code
function startFloatTitle() {
var cnt=0;
var allTableIDs = new Array();
allTables = document.getElementsByTagName("table");
// Scan page for all tables with a class of "FloatTitle"
for (i=0;i<alltables.length;>
if (allTables[i].className == "FloatTitle") {
// Get the ID. If no ID exists then assign one
tableID = allTables[i].id;
if ( tableID == "") {
tableID = "tmpFloatTitleTableId" + cnt;
allTables[i].id = tableID;
}
// Save ID''s
allTableIDs[cnt] = tableID;
cnt++;
}
}
// Start floating the tables title
for (i=0;i<alltableids.length;>
floatTitle(allTableIDs[i],i);
}
}
//////////////////////////////////////////////////////////////////////////////
// floatTitle - Start the float process
// @param tableID - ID of table that floating title will be created for
// @param cnt - Number representing table - for tracking seperate float events
//
// This function calls the functions which create the floating title and
// start the floating process
//////////////////////////////////////////////////////////////////////////////
var floatTitleTimer = new Array();
function floatTitle(tableID,cnt) {
// Stop any old Loops
if (typeof(floatTitleTimer[cnt])== ''undefined'') floatTitleTimer[cnt] = 0;
clearTimeout(floatTitleTimer[cnt]);
// Create title object then start float loop
titleID = createTitleObj(tableID);
floatTitleLoop(tableID,titleID,cnt);
}
function createTitleObj (tableID) {
var titleWrapperID = tableID + "Title";
var titleTableID = tableID + "TitleTable";
// If Title has not been created yet
if (document.getElementById(titleWrapperID)==null) {
// "clone" the Table''s thead
tableObj = document.getElementById(tableID);
clonedtHead=tableObj.tHead.cloneNode(true);
// Create wrapper div
titleWrapperObj = document.createElement("div");
titleWrapperObj.setAttribute("id", titleWrapperID);
// Create the Title table
TitleTable = document.createElement("table");
TitleTable.setAttribute("id", titleTableID);
// Append Cloned thead to the Title table
TitleTable.appendChild( clonedtHead );
// Append table to div container
titleWrapperObj.appendChild(TitleTable);
// Insert wrapper div into the DOM before Table
parentDiv = tableObj.parentNode;
parentDiv.insertBefore(titleWrapperObj, tableObj);
// Initially position container
titleWrapperObj.style.position="absolute";
titleWrapperObj.style.top = "0px";
titleWrapperObj.style.zIndex="1";
}
tableObj = document.getElementById(tableID);
titleTableObj = document.getElementById(titleTableID);
// Set Title width to be the same as Table
titleWrapperObj = document.getElementById(titleWrapperID);
titleWrapperObj.style.width = tableObj.offsetWidth + ''px'';
// Set widths of Title TD''s to same as Table TD''s
tableCells = tableObj.tHead.rows[0].cells;
titleTableCells = titleTableObj.tHead.rows[0].cells;
for (var i=0; i != tableCells.length; i++) {
titleTableCells[i].style.width = (tableCells[i].clientWidth)+ ''px'';
titleTableCells[i].style.cursor = ''normal'';
}
return titleWrapperID;
}
function floatTitleLoop(tableID,titleID,cnt) {
// If Table and Title objects exist
if (document.getElementById(tableID) !=null && document.getElementById(titleID) !=null) {
// Set value to be number of pixels from screen top that you wish
// scrolling to start at. 0=top, 10=10 pixels down from top, etc..
// Useful for those who happen to have top screen banners
var startOffsetTop = 0;
// Get start and stop float positions from table
var tableObj = document.getElementById(tableID);
var tablePos = FindPosition(tableObj);
var startTop = tablePos[1] - startOffsetTop;
var endTop = startTop + tableObj.clientHeight;
// Get new positon of body scroll top and keep it in bounds
var newTop =(document.documentElement.scrollTop>0) ? document.documentElement.scrollTop : document.body.scrollTop;
if (newTop < startTop) newTop = startTop;
if (newTop > endTop) newTop = endTop;
// Move the title to new postion
var titleObj = document.getElementById(titleID);
if (newTop > startTop && newTop < endTop) {
// Display "Title" if it is not all ready being displayed
if (titleObj.style.display != ''block'') titleObj.style.display=''block'';
// Apply offset to get newTop position
newTop = newTop + startOffsetTop;
// Apply Ease-In effect
easeInWanted=true;
if (easeInWanted) {
// Get current location and get the difference from where it''s
// at to where you want it to go
oldTop = parseInt(titleObj.style.top);
topDiff=newTop-oldTop;
// Calaculate how far you want to move it - then set that to new postion
moveTop=0;
if ( (topDiff < (-1) ) || (topDiff > (1) ) ) { moveTop=Math.round(topDiff/3);}
newTop = oldTop + moveTop;
}
// Move to new top position
if (newTop < 0) newTop = 0;
titleObj.style.top = newTop + "px";
} else {
// Else hide "Title" if it is not all ready hidden
if (titleObj.style.display != ''none'') {
titleObj.style.display=''none'';
titleObj.style.top = "0px";
titleObj.style.zIndex="1";
}
}
}
// Execute this function again in 40 milliseconds (thousandths of a second)
cmd = "floatTitleLoop(''" + tableID + "'',''" + titleID + "'',''" + cnt + "'')";
floatTitleTimer[cnt] = window.setTimeout(cmd, 40);
}
//////////////////////////////////////////////////////////////////////////////
// FindPosition - find the Top and Left postion of an object on the page
// @param obj - object of element whose position needs to be found
// @return array - Array whoose first eleemnt is the left postion and whoose
// second is the top position
//////////////////////////////////////////////////////////////////////////////
function FindPosition(obj) {
// Figure out where the obj object is in the page by adding
// up all the offsets for all the containing parent objects
if (obj == null) return [0,0];
// Assign the obj object to a temp variable
tmpObj = obj;
// Get the offsets for the current object
var obj_left = tmpObj.offsetLeft;
var obj_top = tmpObj.offsetTop;
// If the current object has a parent (ie contained in a table, div, etc..)
if (tmpObj.offsetParent) {
// Loop through all the parents and add up their offsets
// The while loop will end when no more parents exist and a null is returned
while (tmpObj = tmpObj.offsetParent) {
obj_left += tmpObj.offsetLeft;
obj_top += tmpObj.offsetTop;
}
}
return [obj_left , obj_top];
}
//////////////////////////////////////////////////////////////////////////////
// Start floating titles after window finishes loading
//////////////////////////////////////////////////////////////////////////////
window.onload = startFloatTitle;
//////////////////////////////////////////////////////////////////////////////
// Start floating titles when window is resized
//////////////////////////////////////////////////////////////////////////////
window. önresize = startFloatTitle;
[edit]不要大喊大叫.使用所有大写字母被认为是在互联网上大喊大叫，并且粗鲁(使用所有小写字母被认为是幼稚的).如果要认真对待，请使用大写字母.添加了代码块-OriginalGriff [/edit]
[edit]DON''T SHOUT. Using all capitals is considered shouting on the internet, and rude (using all lower case is considered childish). Use proper capitalisation if you want to be taken seriously. Code block added- OriginalGriff[/edit]
推荐答案
对不起，我不想进入您的人群代码.顺便说一句，我给你一堆(这很简单)，您只需从中选择想要的.
带有固定标题的HTML表? [
I''m sorry man I don''t want to go inside your crowd-code. BTW I''ll give you a bunch(Which is simple), you just pick what do you want from that.
HTML table with fixed headers?[^](contains also Crossbrowser solutions)
Cheers.
这篇关于冻结HTML表中的标题行:在Firefox中有效，但在IE中不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
