Freeze table header in jquery

I am trying t开发者_Go百科o freeze table header. I am using this plugin to achieve the same.

When I used this plugin I got this.table_obj is undefined. I tried to find out what's the problem but couldn't get the solution. When I tried this code in plain html file it works, but not on server side. you can see the error here..

Any suggestion why I am getting this error?

I think the javascript code expects table id to get the table. Probably you have not specified table id when calling javascript code or specified wrong table id or there is no table id in the table markup.

However you may have a look at some other jquery plugin - http://www.farinspace.com/jquery-scrollable-table-plugin/

Your question have some relation with the following question. So, you can also look at that

https://stackoverflow.com/questions/983031/jquery-how-to-freeze-table-header-and-allow-scrolling-of-the-rest-of-the-rows

i have written fallowing code in order to achieve my goal(as asked in question)-

here is the plugin i have written.

(function($){
$.fn.scrollbarTable=function(i){
var o={};
if(typeof(i)=='number')o.height=i;
else if(typeof(i)=='object')o=i;
else if(typeof(i)=='undefined')o={height:300}
return this.each(function(){
var $t=$(this);
var w=$t.width();
$t.width(w-
function(width){
    var parent,child;
    if(width===undefined){
        parent=$('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
        child=parent.children();
        width=child.innerWidth()-child.height(99).innerWidth();parent.remove();
    }
    return width;
}());
var cols=[];
var tableCols=[];
$t.find('thead th,thead td').each(function(){cols.push($(this).width());});
$t.find('tr:eq(1) th,thead td').each(function(){tableCols.push($(this).width());});
var $firstRow=$t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);
$firstRow.find('thead th,thead td').each(function(i){$(this).attr('width',cols[i]);});
$t.find('tr:first th,tr:first td').each(function(i){$(this).attr('width',tableCols[i]);});
var $wrap=$('<div>');
$wrap.css({width:w,height:o.height,overflow:'auto'});
$t.wrap($wrap);})};}(jQuery));

How to use:

$(document).ready(function(){
    $('table#tabss').scrollbarTable();
}

hope it will help someone somewhere..

Any way thanks to all of you for your kind support... :)