jquery 表格冻结

Demo

 #jg_tablebox {
	position: relative;
	margin:0px;
	padding:0px;	
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border:2px solid #b5b5b5;
	width:40%;
	height:400px;
	overflow:scroll;
	font-family:Arial;
	font-size:13px;
	display:inline-block;
	*display:inline;
	*zoom:1;
}
#jg_tablebox table {
	border-collapse: collapse;
	border:1px solid #555;
	top:0px;
	left:0px;
	position:absolute;
	width:1000px;
}
#jg_tablebox table td {
	border:1px solid #e5e5e5;
	color:#393939;
	height:35px;
	background:#fff;
}
#jg_tablebox table th {
	background-color:#009fdd;
	color:#fff;
	border:1px solid #e5e5e5;
	z-index:1;
	height:35px;
}
#jg_tableleft {
	z-index:9998;
}
#jg_tableleft td {
	background:#ddd;
}
#jg_tabletop {
	z-index:9999;
}
.jg_freeze {
	display:none;
}
                  

 ;!function (w, jq, undefined) {
        jq.fn.freeze = function () {

            var config = {
                top: !!arguments[0] || true,
                left: !!arguments[1] || true

            }
            var that = jq(this);

            //create left table
            if (config.left) {
                var table_left = "<table class='jg_freeze jg_freeze_left' id='jg_tableleft'>";
                var localname = ''; var cache, this_obj;
                that.find('tr').each(function (i, val) {
                    this_obj = jq(val).children().eq(1);
                    if (i == 0) { cache = this_obj.css('width') };

                    localname = this_obj[0].localName;
                    table_left += "<tr><" + localname + "  >" + this_obj.html() + "</" + localname + "></tr>";
                    console.log(this_obj.css('height'));
                })
                table_left += "</table>";

                that.parent().append(table_left);
                jq(jg_tableleft).css('width', cache);
            }
            //top
            if (config.top) {
                var table_top = "<table id='jg_tabletop' class='jg_freeze jg_freeze_top'><tr>";
                that.find('th').each(function (i, val) {
                    table_top += "<th style='width:" + jq(val).width() + "px'>" + jq(val).html() + "</th>";


                })
                table_top += "</tr></table>";
                that.parent().append(table_top);
      


            }
            that.parent().scroll(function () {
            // console.log($(window).scrollLeft());$(window).scrollTop();
            var offsetTop = jq(this).scrollTop();
            var offsetleft =jq(this).scrollLeft();
            if (offsetTop > 40) {
                $('#jg_tabletop').show(); $("#jg_tabletop").css({ top: offsetTop + "px" })

            } else {
                $('#jg_tabletop').hide();
            }
            if (offsetleft > 40) {
                $('#jg_tableleft').show(); $("#jg_tableleft").css({ left: offsetleft + "px" })
            } else { $('#jg_tableleft').hide(); } 
        })
    }

    } (window, $)
    window.onload = function () {
        $('.jg_table').freeze();
         }

<div id='jg_tablebox'>
<table class="jg_table" id="maintable"><tbody>{{data}}</tbody></table>
</div>