ArticlesLinksMake a PayPal Contribution to remove Script CopyWrite notices or for Non-Commercial use!
All scripts are licenced:
|
Freeze Panes html table like excel
There are already a few scripts around that demonstrate how to freeze a 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 column widths to be set to a specific width...for example all column widths must be set to 100px wide. This I also found not to be ideal because the columns hide any content that is wider than 100px and offered 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.
This example is perfect for tables containing large amounts of data and is cross browser compatable(tested IE6,IE7,Fire Fox 2.0.0.6,Opera 9.22)
and might be best employed using database recorset paging.
2nd March 2008:
Best performance for scrolling columns was with using Fire Fox and Opera, while IE was a little slow. Rows were about the same.
The script simply hides/unhides columns or rows using scrolling buttons:
Place the javascript function in either the head or body of your page.
The script could be better optimised, but for demonstration the code is easy enough to follow:
CommentsFreezer: Works great, thankou! Will: Updated to version 1.1 for better layout within a scrollable div using custom horizontal and verticle scrollbars.
- http://coastworx.com/freezepanes_table_scroll.html excel: hi, great thanx. Andrei: I want to scroll left 3 columns at a time and I've studied your JavaScript code. I'm still confused about it. Can you tell me please what lines should I modify or what lines of code should I add ? Andrei: And also, if I want to start scrolling from second column, what should I modify? var myCol=2; ? Will: Don't know about your first question.
- yep, set these variable to determine the freeze panes column and row position: var myRow=1; var myCol=1; Andrei: I solved it :) Thanks.
- For my first question, scrolling 3 columns at a time, I ve used something like :
- myTable.rows[x].cells[myCol-1].style.display="";
- myTable.rows[x].cells[myCol-2].style.display="";
- myTable.rows[x].cells[myCol-3].style.display="";
- in the right() function and I ve also modify the condition like
- if( myCol >=4){
- myCol=myCol-3;
- }
- Something similar in the left() JavaScript function. J_P: you have a nice piece of code here.
-
- There is however, a magic number of "1" .
-
- Try to make an example of 3 fixed columns and scroll 5 columns at a time. Peter: i have tables in a for loop and how to set the table id ? Suren: Its cool working gud but not working for multiple tables .what should i modify to make it work for multiple talbes?? thanks in advance Will: @Suren, Sorry, i only designed for 1 table. You could however dupliate the functions and variable using different names and pass different table Id attribute. Will: @Peter, tables or rows? Using javascript you could set the table id using element.setAttribute("id","value") peter: <%for offtake_sku in @offtake_skus%>
- <table id="t<%=i>" border="0" cellspacing="1" cellpadding="3" bgcolor="lightgreen" >
- <tr><td></td></tr>
- </table>
- <%end>
- how can i set the table id dynamically if(!myTable){myTable=document.getElementById("id");} peter: <%for i in 1..5%> instead of <%for offtake_sku in @offtake_skus%> Will: Your code example doesn't make sense...i cannot guess.
- It looks like classic ASP but incomplete and you are writing 5 tables which the script only supports one table per page currently. Maybe in future version i'll make support for multiple tables.. Sham: its working gud in mozila firefox but some what slow in IE on first click. Is there any solution to make it work fast in IE Will: Different browsers / different capabilities. You could try set a faster timeout speed by adjusting 100 in window.setTimeout(). Sham: I ve multiple link in single page and its working for first link, when i click remaining link its not working.
- Is there any solution?
- Thanks in advance Will: Please see prev posts already on the subject of multiple tables. dom: How to fix the first column width as a static size. sunmeet: Is there a way to have both vertical and horizontal scrollbars alongwith the present functinality Will: @sunmeet: when you say "both", do you men for example vertical scroll on left side of table in addition to right scroll bar and same for horizontal scroll? http://coastworx.com/freezepanes_table_scroll.html Malvika: will ,Running this in IE ,
- http://coastworx.com/freezepanes_table_scroll.html
- doesn't render the horizontal scrollbar.
- I mean it doesnt allow user to navigate to right. Will: @Malvika: Works fine for me using IE7. Can you send a screen shot? Malvika: Hi Will, I would like to use your code logic for my Table.Does it come under any License agreements.I would be using the logic and modifying the code to suit my requirements.Can I use it Will: So long as its not commercialized you may use it freely. Malvika: Will, Do you mean this code cannot be used for commercial application ? Will: Correct. If you have any doubt, send me an email outlining intended use. danny: nice work dude...thanks Ravikumar: Hi, i am doing freeze table with bit different, Can you help me.
-
- I have a table like this:
- Group1 Group2 Group3
- G1-1 G1-2 G2-1 G2-2 G2-3 G3-1 G3-2
- Left-1
- Left-2
- Left-3
- .
- .
-
- Like above.
- Here there is two levels of headings in the rows.
- that mean: Group1 having G1-1, G1-2 two sub headings.
-
-
- Hear i got two major problems:
- 1. i am not able to create freeze for both first and second rows. Ravikumar: Hi
- This article is very much helped me. And thanks for your work. I applied all the procedure describes in this article. But i have little bit different need.
- that is,
- 1). I having two heading rows instead of one.
- 2). First row having some Group-1, Group-2....
- 3). Second row having Item-1, Item-2...Under Group-1 like that Item-3, Item-4, Item-5...Under Group-2....
- 4). And the First column Column heading having 'Product Name' Ravikumar: Here some of the part i solved.
- 1). I done Two Row Heading. But the problem is when i press left and right buttons the order of first row and second row headings getting disorder.
- 2). And if i press the top/bottom buttons. the second row is not in freeze. it is not appearing.
- I tried so much of time but not able to resolve yet. I think you understand my problem. Please give me your suggestion or solution to do solve above two problems. Will: @Ravikumar: I'll be bringing out an updated version soon, in the mean time use the script from here:http://coastworx.com/freezepanes_table_scroll2.html
-
- Modify var freezeRow=2; //change to row to freeze at
- var freezeCol=2; //change to column to freeze at Jay: Will, quick question. When I scroll back up, any rows that I have had hidden through a javascript animated collapse are now showing. Do you know of any way to keep these hidden?
-
- Thanks! Will: Jay, doesn't happen in the demo http://www.coastworx.com/freezepanes_table_scroll.html
- Email me the url if you wish me to check it. Mr. Alone: Hello.
- Is there any way to start table not only from first row? I mean that sometimes it will be great to show table from ex. row 45 and still have possibility to scroll whole table. Chiths: Not able to see the right scroll button in IE 7.0, but works for firefox Abhinav: Hi Will,
- Quite impressed by the code piece you have here. I have a slight issue. When I increase the number of columns in my table the div seems to forget that the overflow is hidden and seems to go above 80% width of page. Any solutions. Will: It cannot forget, something you are introducing is not right. At what point are you increasing columns, check its before the js runs. Abhinav: Hey Will,
- Figured out the issue. It was due to me embedding my div within other controls. Thanks anyway Abhinav: Hi Will,
- If I have entry text boxes for the columns and I try to move through the columns using keyboard tabbing then the vertical scrollbar gets detached from the right of the div and moves inside the main div. Any ideas how to avoid this Amit: Hi Guys, Great work done.Congrats.
- I found one problem with this ,when some of cells in my table are blank then there is problem with scrolling.
- Has anyone faced it?
|