Click here to Skip to main content
15,868,016 members
Articles / Programming Languages / Javascript
Article

Freeze Panes like Excel

Rate me:
Please Sign up or sign in to vote.
4.50/5 (14 votes)
1 Mar 2008CPOL1 min read 135.6K   27   27
Freeze panes in an HTML table, cross browser using JavaScript.

Introduction

The script described in this article simply hides/unhides columns or rows using scrolling buttons, creating an Excel-like effect.

Background

There are already a few scripts around that demonstrate how to freeze an HTML table top row and first column.

Most of these scripts are specific to Internet Explorer, while a couple I have tried are cross browser compatible using CSS, but require the columns to be set to a specific width... for example, all column widths must be set to 100px wide.

I found this not to be ideal because the columns hide any content that is wider than 100px and there is no way of adjusting the column widths to view the hidden data via an onscreen control....not ideal for dynamically created data from a database.

Another solution I found was quite good but required a very large and complex amount of JavaScript code.

Using the code

The script simply hides/unhides columns or rows using scrolling buttons:

XML
<button title="Up" onmousedown="upp();" onmouseup="upp(1);">Up</button>
<button title="Left" onmousedown="left();" 
        onmouseup="left(1);">&lt;&lt;</button>
<button title="Right" onmousedown="right();" 
        onmouseup="right(1);">&gt;&gt;</button>
<button title="Down" onmousedown="down();" onmouseup="down(1);">Dn</button>

Naturally, images can easily be used for a more attractive display.

Place the JavaScript function in either the head or body of your page. The function setUp() initializes the table the first time one of the buttons is clicked. Make sure to modify:

JavaScript
if(!myTable){myTable=document.getElementById("t1");

to match the ID of your table if it is not "t1". The script could be better optimised, but for demonstration, the code is easy enough to follow.

JavaScript
  var myRow=1;
  var myCol=1;
  var myTable;
  var noRows;
  var myCells,ID;
  
function setUp(){
    if(!myTable){myTable=document.getElementById("t1");}
     myCells = myTable.rows[0].cells.length;
    noRows=myTable.rows.length;

    for( var x = 0; x < myTable.rows[0].cells.length; x++ ) {
        colWdth=myTable.rows[0].cells[x].offsetWidth;
        myTable.rows[0].cells[x].setAttribute("width",colWdth-4);

    } 
}

function right(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="";
        }
        if(myCol >1){myCol--;}

        ID = window.setTimeout('right()',100);
    }
}
  
function left(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myCol<(myCells-1)){
        for( var x = 0; x < noRows; x++ ) {
            myTable.rows[x].cells[myCol].style.display="none";
        }
        myCol++
        ID = window.setTimeout('left()',100);
        
    }
}
  
function down(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<(noRows-1)){
            myTable.rows[myRow].style.display="none";
            myRow++    ;
        
            ID = window.setTimeout('down()',100);
    }    
}
 
function upp(up){
    if(up){window.clearTimeout(ID);return;}
    if(!myTable){setUp();}

    if(myRow<=noRows){
        myTable.rows[myRow].style.display="";
        if(myRow >1){myRow--;}
        ID = window.setTimeout('upp()',100);
    }    
}

See a working Freeze Pains Demo here.

Here is an updated version for better layout within a scrollable div, using custom horizontal and verticle scrollbars: demo.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Member 961177414-Feb-13 6:11
Member 961177414-Feb-13 6:11 
QuestionTook your code and added some Jquery to it Pin
Member 961177414-Feb-13 6:11
Member 961177414-Feb-13 6:11 
Using the sliders in JQuery I could mimic the scroll bar behavior

All you need is a Table and 2 div's for the sliders.


C#
<script type="text/javascript" language="javascript">
    var myRow = 1;
    var myCol = 1;
    var fixCols = 3;
    var fixRows = 1;
    var myTable;
    var noRows;
    var myCells, ID;
    var dispRows = 20;
    var dispCols = 0;



    function ScrollVert() {
        for (x = fixRows; x <= myRow; x++) {
            if (x < noRows) {
                myTable.rows[x].style.display = "none";
            }
        }

        for (x = myRow; x <= myRow + dispRows; x++) {
            if (x < noRows) {
                myTable.rows[x].style.display = "";
            }

        }

        for (x = myRow + dispRows; x <= noRows; x++) {
            if (x < noRows) {
                myTable.rows[x].style.display = "none";
            }
        }
    }


    function ScrollHoriz() {
        for (y = fixCols; y <= myCol; y++) {

            if (y < (myCells)) {
                for (x = 0; x < noRows; x++) {

                    myTable.rows[x].cells[y].style.display = "none";
                }
            }
        }

        for (y = myCol; y <= myCol + dispCols; y++) {
            if (y < myCells) {
                for (x = 0; x < noRows; x++) {
                    myTable.rows[x].cells[y].style.display = "";
                }
            }

        }

        for (y = myCol + dispCols; y <= myCells; y++) {
            if (y < (myCells)) {
                for (x = 0; x < noRows; x++) {
                    myTable.rows[x].cells[y].style.display = "none";
                }
            }
        }
    }


    $(document).ready(function () {




        dispCols = parseInt((parseInt($(document).width()) - 500) / 75);
        if (!myTable) { myTable = document.getElementById("tSchedule"); }
        myCells = myTable.rows[0].cells.length;
        noRows = myTable.rows.length;




        $("#SliderHoriz").slider({ range: "max", min: fixCols, max: myCells - dispCols, value: fixCols, slide: function (event, ui) {
            myCol = parseInt(ui.value);
            ScrollHoriz();

        }
        });

        $("#SliderVert").slider({ orientation: "vertical", range: "max", min: fixRows, max: noRows, value: noRows, slide: function (event, ui) {
            myRow = noRows - parseInt(ui.value);
            ScrollVert();
        }
        });


        myRow = noRows - parseInt($("#SliderVert").slider("value"));
        myCol = parseInt($("#SliderHoriz").slider("value"));
        ScrollHoriz();
        ScrollVert();


    });


</script>

AnswerRe: Took your code and added some Jquery to it Pin
Member 1088420814-Jun-14 3:12
Member 1088420814-Jun-14 3:12 
GeneralMy vote of 5 Pin
JonAtkins5720-Oct-12 10:31
JonAtkins5720-Oct-12 10:31 
QuestionJavascript Pin
ursatish20-Sep-12 19:17
ursatish20-Sep-12 19:17 
GeneralTable inside table problem Pin
chadok17-Jun-11 3:43
chadok17-Jun-11 3:43 
Questionfreeze pane error Pin
Lim Tjie Siong, Indo10-Mar-11 0:12
Lim Tjie Siong, Indo10-Mar-11 0:12 
Generalcss help needed Pin
webber1234563-Jan-11 8:38
webber1234563-Jan-11 8:38 
GeneralRe: css help needed Pin
Will663-Jan-11 17:59
Will663-Jan-11 17:59 
GeneralRe: css help needed Pin
webber1234569-Jan-11 10:45
webber1234569-Jan-11 10:45 
GeneralRe: css help needed Pin
Will669-Jan-11 13:32
Will669-Jan-11 13:32 
GeneralRe: css help needed Pin
webber12345610-Jan-11 11:11
webber12345610-Jan-11 11:11 
GeneralMy vote of 3 Pin
Nawaz M11-Oct-10 11:18
Nawaz M11-Oct-10 11:18 
Generalhorizontal scroll working only once pls help Pin
snigdha123412-Aug-10 1:24
snigdha123412-Aug-10 1:24 
GeneralRe: horizontal scroll working only once pls help Pin
Will6612-Aug-10 3:16
Will6612-Aug-10 3:16 
GeneralRe: horizontal scroll working only once pls help Pin
snigdha123412-Aug-10 23:09
snigdha123412-Aug-10 23:09 
GeneralProblem when cells are merged Pin
amit12121242-Aug-10 21:45
amit12121242-Aug-10 21:45 
GeneralRe: Problem when cells are merged Pin
lubos190221-Sep-11 19:29
lubos190221-Sep-11 19:29 
GeneralUpdated: now in custom scrollable div Pin
Will661-Mar-08 3:57
Will661-Mar-08 3:57 
GeneralRe: Updated: now in custom scrollable div Pin
Marc Leger1-Mar-08 9:52
Marc Leger1-Mar-08 9:52 
AnswerMultiple Table Solution Pin
Eric Carter28-Feb-08 11:23
Eric Carter28-Feb-08 11:23 
GeneralRe: Multiple Table Solution Pin
Will661-Mar-08 3:20
Will661-Mar-08 3:20 
GeneralAnother option (using JQuery) Pin
rubensr22-Aug-07 16:33
rubensr22-Aug-07 16:33 
GeneralPrint large html table Pin
Elyons0321-Aug-07 15:11
Elyons0321-Aug-07 15:11 
GeneralTry CSS Pin
meteorbites20-Aug-07 20:22
meteorbites20-Aug-07 20:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.