日期:2014-05-19  浏览次数:20594 次

js 小题,请高手指点
用js 控制做一个跟excel 表格差不多的功能,就是 标题栏固定,左边序号列也是固定的;当向下拉的时候 左边序号是对应每一行的也会跟着下滑;而顶部的列头是对应每一列的所以不会动, 当向右查看数据时左边的序号列(只有这列固定不动) 不动;而顶部的列标题头对应每列就会跟着向右滑动.. 这样的功能用js 怎么控制啊,请高手请教》。。。。

------解决方案--------------------
居然一次发不了,那就分几次发
css样式
HTML code

<style type="text/css">
body { 
    font-family: "arial", "helvetica", "sans-serif", ""; 
    font-size: 9pt; 
    margin: 0px;
    scrollbar-face-color:#efefe7;
    scrollbar-highlight-color:#ffffff;
    scrollbar-3dlight-color:#a5a5a5;
    scrollbar-darkshadow-color:#a5a5a5;
    scrollbar-shadow-color:#d6d6ce;
    scrollbar-arrow-color:#003184;
    scrollbar-track-color:#deded6;
    }
table { 
    font-family: "arial", "helvetica", "sans-serif",""; 
    font-size: 9pt; 
    line-height: 150%; 
    color: #000000;
         }
.display-tb2
{
    border-right: #808080 1px solid; 
    border-top: #808080 1px solid; 
    border-left: #808080 1px solid; 
    border-bottom: #808080 1px solid;
    border:0;
    cellpadding:2;
    cellspacing:0;
    margin-top:2px;
    border-collapse:collapse;
}
div.tableContainer
{
    overflow-x:auto;
    width:760px;
    dyn-behavior:expression(
        onscroll == null?
            (onscroll = function(){
                if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;
                var oGridBody = document.getElementById("order_GridBody");
                oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";
                event.srcElement.oldScroll == event.srcElement.scrollLeft;
            }):true,
        onmousedown == null?
            (onmousedown = function(){
                    if(self.currentTH != null) return;
                    var obj = document.elementFromPoint(event.x,event.y);
                    var objL = document.elementFromPoint(event.x - 1,event.y);

                    if(obj.tagName.toLowerCase() == "th") 
                    {
                    
                        if(objL.tagName.toLowerCase() == "th")
                        {
                            obj = objL;
                        }
                        if(obj.className == "fixed") return;
                        self.currentX = event.x;
                        self.currentTH = obj.childNodes[0];
                        self.currentTH.setCapture();
                    }
            }):true,
        onmouseup == null?
            (onmouseup = function(){
                    if(self.currentTH != null)
                    {
                        self.currentTH.releaseCapture();
                        self.currentTH = null;
                    }    
            }):true,
        onmousemove == null?
            (onmousemove = function(){
                    if(self.currentTH != null)
                    {
                        var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);
                        if(width < 0) width = 0;
                        var dt = parseInt(self.currentTH.style.width) - width;
                        self.currentTH.style.width = width;
                        __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
                        self.currentX = event.x;
                    }
            }):true,
        self.__resizeCell == null?
            (self.__resizeCell = function(idx, width){
                    var cells = document.getElementById("order_GridBody_Cells");
                    var rows = cells.childNodes;
                    var i = 0;
                    for (var i = 0; i < rows.length; i++)
                    {
                        var cell = rows[i].childNodes[idx].childNodes[0];
                        var resetPattern = /style=[^\s\t\n]+/;