IE8显示可滚动表的隐藏问题

IE8 show hide issue for scrollable table

本文关键字:隐藏 问题 滚动 显示 IE8      更新时间:2023-11-28

我使用javascript在页面加载时创建了一个可搜索的表默认情况下,表的可见性是隐藏的。当我在IE中最小化/最大化页面时,浏览器会使隐藏的表可见。有人能帮我解决这个问题吗。

创建可滚动表的javascript如下

      /* Scrollable table */
       function setScrollableTableHeight(name,maxrows)
       {
        var count;
            var arrObj = document.getElementsByName(name);              
            for(count=0;count<arrObj.length;count++)
            {
                ScrollableTable(arrObj[0], maxrows);
            }              
       }
        // set Body width to screen width
        function setBodyWidth()
        {
          objBody = document.getElementsByTagName('body');
          objBody[0].style.width = screen.width - 40;
          var objDivs = document.getElementsByTagName('div');
          for(var i=0;i<objDivs.length;i++)
          {
            if(objDivs[i].className == "OuterPanel")
            {
                if(screen.width < 980)
                    objDivs[0].style.width = 980 - 42;
                else
                    objDivs[0].style.width = screen.width - 42;
                break;
            }
          }
        }
function ScrollableTable (tableEl, maxRows, tableWidth) {
 var tableHeight = 25 + maxRows * 25;
 var numRows = 0;
    this.initIEengine = function () {
        if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
            this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
        }
        if (this.thead) {
            var trs = this.thead.getElementsByTagName('tr');                
            for (x=0; x<trs.length; x++) {
                trs[x].style.position ='relative';
                trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
            }           
        }

        if (this.tfoot) {
            var trs = this.tfoot.getElementsByTagName('tr');             
            for (x=0; x<trs.length; x++) {
                trs[x].style.position ='relative';              
                trs[x].style.setExpression("bottom",  "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
            }
        }       
        eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
    };

        this.initFFengine = function () {
        var headHeight = (this.thead) ? this.thead.clientHeight : 0;
        var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
        var bodyHeight = this.tbody.clientHeight;
        this.tbody.setAttribute("id", "dynamicScrollParentfirefox");
        var trs = this.tbody.getElementsByTagName('tr');
        numRows = trs.length;
        var tds; 
        if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {       
             for (x=0; x<trs.length; x++) {
                tds = trs[x].getElementsByTagName('td');
                tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';                 
            } 
        }
        var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
        this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
    };
    this.tableEl = tableEl;
    this.scrollWidth = 16;
    this.originalHeight = this.tableEl.clientHeight;
    this.originalWidth = this.tableEl.clientWidth;
    /* modified by rmv */
    if(parseInt(tableHeight) > this.originalHeight && this.originalHeight!=0)
        tableHeight = this.originalHeight;
    /* modified by rmv ends*/   
    this.newHeight = parseInt(tableHeight);
    this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth; 
    this.tableEl.removeAttribute('height');             
    var loverflowParent = document.createElement('div');    
    loverflowParent.setAttribute("id","dynamicScrollParent");        
    this.containerEl = this.tableEl.parentNode.insertBefore(loverflowParent, this.tableEl);
    this.containerEl.appendChild(this.tableEl);
    this.containerEl.style.height = this.newHeight + 'px';
    this.containerEl.style.width = this.newWidth + 'px';
    var thead = this.tableEl.getElementsByTagName('thead');
    this.thead = (thead[0]) ? thead[0] : null;
    var tfoot = this.tableEl.getElementsByTagName('tfoot');
    this.tfoot = (tfoot[0]) ? tfoot[0] : null;
    var tbody = this.tableEl.getElementsByTagName('tbody');
    this.tbody = (tbody[0]) ? tbody[0] : null;
    if (!this.tbody) return;
    if (document.all && document.getElementById && !window.opera)  this.initIEengine()
    if (!document.all && document.getElementById && !window.opera) this.initFFengine()       
}

当页面高度发生变化时,您也可以尝试强制表格滚动。您可以在CSS中将此属性应用于表的容器:overflow-y:scroll;