jQuery Fixed Table Header Demo Page

Please scroll page for see action and plugin description.

You will see fixed header for each table when you scroll down the page.
And if highlight feature setting is true you will see highlighted row when is mouse over the each row.

School Date Time1 Time2 Time3 Facility
tfoot test row
School1 01.01.2009 08:00 10:00 11:00 Location of Event
School2 02.01.2009 10:00 12:00 16:00 Location of Event
School3 03.01.2009 8:00 10:00 17:00 Location of Event
School4 04.01.2009 10:00 10:43 10:00 Location of Event
School5 05.01.2009 10:00 10:00 10:00 Location of Event
School6 06.01.2009 10:00 21:00 10:00 Location of Event
School7 07.01.2009 09:00 10:00 14:00 Location of Event
School8 08.01.2009 10:00 14:00 10:00 Location of Event
School9 09.01.2009 6:00 10:00 10:00 Location of Event
School10 10.01.2009 10:00 10:00 10:00 Location of Event
School11 11.01.2009 10:00 10:00 10:00 Location of Event
School12 12.01.2009 7:00 10:00 10:00 Location of Event
School13 13.01.2009 10:00 15:00 16:00 Location of Event
School14 14.01.2009 10:00 18:00 19:00 Location of Event
School15 15.01.2009 10:00 10:00 13:00 Location of Event
School16 16.01.2009 6:00 10:00 12:00 Location of Event
School17 17.01.2009 10:00 16:00 20:00 Location of Event
School18 18.01.2009 10:00 11:00 17:00 Location of Event

You must add jquery.min.js and jquery.fixedtableheader.min.js in your code like this :

<script src="jquery.min.js" type="text/javascript"> </script>
<script src="jquery.fixedtableheader.min.js" type="text/javascript"> </script>

<script type="text/javascript">
$(document).ready(function() {
   $('.tbl').fixedtableheader();
});
</script>


Finally you must set class property to "tbl".
<table  id="tblTest1" class="tbl" >.....


There are three options in this plugin.

First Option = headerrowsize:1
Default is 1 . It is support for setting multiple fixed header rows.
If you are using one row for header you cannot use this parameter.
<script type="text/javascript">
$(document).ready(function() {
   $('.tbl').fixedtableheader({
     headerrowsize:2
   });
});
</script>


Second Option = highlightrow: false
Default value is false. This option highlight row when mouse over.

<script type="text/javascript">
$(document).ready(function() {
   $('.bestupper').bestupper({
      highlightrow: true
   });
});
</script>



Courses -- Autumn 2009
Course Name Course Tutor Summary Code Fee
Course Name 1 Dr. John The course will ... .... ..... .... .... ... H27 $32
Course Name 2 Dr. John The course will ... .... ..... .... .... ... H28 $18
Course Name 3 Dr. John The course will ... .... ..... .... .... ... H30 $43
Course Name 4 Dr. John The course will ... .... ..... .... .... ... H27 $32
Course Name 5 Dr. John The course will ... .... ..... .... .... ... H28 $18
Course Name 6 Dr. John The course will ... .... ..... .... .... ... H30 $18
Course Name 7 Dr. John The course will ... .... ..... .... .... ... H27 $32
Course Name 8 Dr. John The course will ... .... ..... .... .... ... H28 $18
Course Name 9 Dr. John The course will ... .... ..... .... .... ... H30 $18
Course Name 10 Dr. John The course will ... .... ..... .... .... ... H27 $32
Course Name 11 Dr. John The course will ... .... ..... .... .... ... H28 $18
Course Name 12 Dr. John The course will ... .... ..... .... .... ... H30 $18


Third Option = highlightclass: "highlight"
Default value is "highlight". This option set highlighted row's css class.
If you are set "highlightrow: true" you can set highlightclass.

<script type="text/javascript">
$(document).ready(function() {
   $('.tbl').fixedtableheader({
    highlightclass: 'rowhlite'
   });
});
</script>


TIME TABLE
STATION A STATION B
Work Days Saturday Sunday Work Days Saturday Sunday
05:50 06:00 06:20 06:20 06:30 07:25
06:10 06:15 06:40 06:50 07:00 07:45
06:30 06:30 07:00 07:10 07:15 08:00
06:45 06:45 07:20 07:30 07:30 08:20
¦07:00¦ 07:00 07:35 07:50 07:45 08:35
07:10 07:15 07:50 08:10 08:00 08:50
¦07:10¦ 07:30 08:00 08:30 08:20 09:00
¦07:20¦ 07:40 08:10 08:45 08:35 09:15
07:30 07:50 08:20 08:55 08:50 09:30
¦07:40¦ 08:00 08:30 09:05 09:05 09:45
07:50 08:10 08:50 09:15 09:15 10:00
08:00 08:20 09:10 09:30 09:30 10:15
¦08:15¦ 08:30 09:30 09:45 09:40 10:35
08:15 08:45 09:45 10:00 09:50 10:50
08:30 09:00 10:00 10:15 10:05 11:05
08:50 09:15 10:10 10:30 10:20 11:15
09:10 09:30 10:20 10:45 10:30 11:25
09:30 09:45 10:35 11:00 10:45 11:45
09:45 10:00 10:45 11:15 11:00 11:55
10:00 10:10 10:55 11:30 11:15 12:05
10:15 10:25 11:10 11:45 11:30 12:20
10:30 10:35 11:25 12:00 11:45 12:35
10:45 10:50 11:40 12:15 12:00 12:50
11:00 11:05 11:55 12:35 12:20 13:05
11:15 11:20 12:10 12:55 12:35 13:20
11:30 11:35 12:20 13:10 12:50 13:30
11:45 11:55 12:35 13:25 13:00 13:45
12:05 12:15 12:50 13:40 13:20 14:00
12:20 12:35 13:00 14:00 13:40 14:10
12:35 12:50 13:10 14:20 13:55 14:20
12:50 13:05 13:25 14:35 14:10 14:35
13:05 13:25 13:40 14:55 14:25 14:50
13:20 13:45 13:55 15:10 14:40 15:05
13:35 14:05 14:10 15:30 15:00 15:20
13:50 14:20 14:25 15:50 15:20 15:35
14:10 14:35 14:35 16:05 15:40 15:45
14:30 14:55 14:50 16:25 16:10 16:00
14:50 15:10 15:05 16:40 16:30 16:15
15:10 15:25 15:15 17:00 16:50 16:25
15:30 15:40 15:25 ¦17:10¦ 17:05 16:35
15:50 15:55 15:40 17:15 17:20 16:50
16:05 16:15 15:55 17:30 17:35 17:05
16:20 16:35 16:10 17:45 17:50 17:20
16:35 16:55 16:25 17:55 18:10 17:30
16:55 17:10 16:40 18:15 18:30 17:50
17:15 17:30 16:50 ¦18:30¦ 18:45 18:00
17:30 17:45 17:05 18:45 19:00 18:20
17:45 18:00 17:25 19:05 19:15 18:30
18:00 18:15 17:40 19:20 19:30 18:45
¦18:10¦ 18:30 17:55 ¦19:35¦ 19:45 19:00
18:20 18:50 18:15 19:45 20:00 19:15
18:40 19:10 18:35 20:05 20:20 19:40
19:00 19:30 18:50 20:25 20:40 19:55
19:15 19:50 19:05 20:40 21:00 20:10
19:30 20:10 19:20 20:55 21:20 20:25
19:45 20:35 19:35 21:15 21:45 20:40
20:05 21:00 19:55 21:30 22:10 21:00
20:30 21:30 20:15 21:50 22:40 21:25
21:00 22:00 20:45 22:10 23:10 21:55
21:30 21:10 22:40 22:20
22:00 23:10
You can downlad plugin in jquery plugin site


This demo created by Mustafa OZCAN