table表格固定前几列，其余的滚动

最新推荐文章于 2024-01-15 17:59:31 发布

weixin_30483697

最新推荐文章于 2024-01-15 17:59:31 发布

阅读量2.5k

点赞数

文章标签： javascript java 前端 ViewUI

原文链接：http://www.cnblogs.com/mxyr/p/10365727.html

版权

我查了好多资料，只找到一个demo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>new document</title>
    <script type="text/javascript"
            src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

    <script type="text/javascript">

        function FixTable(TableID, FixColumnNumber, width, height) {
            if ($("#" + TableID + "_tableLayout").length != 0) {
                $("#" + TableID + "_tableLayout").before($("#" + TableID));
                $("#" + TableID + "_tableLayout").empty();
            } else {
                $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
            }
            $('<div id="' + TableID + '_tableFix"></div>'
                + '<div id="' + TableID + '_tableHead"></div>'
                + '<div id="' + TableID + '_tableColumn"></div>'
                + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
            var oldtable = $("#" + TableID);
            var tableFixClone = oldtable.clone(true);
            tableFixClone.attr("id", TableID + "_tableFixClone");
            $("#" + TableID + "_tableFix").append(tableFixClone);
            var tableHeadClone = oldtable.clone(true);
            tableHeadClone.attr("id", TableID + "_tableHeadClone");
            $("#" + TableID + "_tableHead").append(tableHeadClone);
            var tableColumnClone = oldtable.clone(true);
            tableColumnClone.attr("id", TableID + "_tableColumnClone");
            $("#" + TableID + "_tableColumn").append(tableColumnClone);
            $("#" + TableID + "_tableData").append(oldtable);
            $("#" + TableID + "_tableLayout table").each(function () {
                $(this).css("margin", "0");
            });
            var HeadHeight = $("#" + TableID + "_tableHead thead").height();
            HeadHeight += 2;
            $("#" + TableID + "_tableHead").css("height", HeadHeight);
            $("#" + TableID + "_tableFix").css("height", HeadHeight);
            var ColumnsWidth = 0;
            var ColumnsNumber = 0;
            $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
                ColumnsWidth += $(this).outerWidth(true);
                ColumnsNumber++;
            });
            ColumnsWidth += 2;
            if ($.browser.msie) {
                switch ($.browser.version) {
                    case "7.0":
                        if (ColumnsNumber >= 3) ColumnsWidth--;
                        break;
                    case "8.0":
                        if (ColumnsNumber >= 2) ColumnsWidth--;
                        break;
                }
            }
            $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
            $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
            $("#" + TableID + "_tableData").scroll(function () {
                $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
                $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
            });
            $("#" + TableID + "_tableFix").css({
                "overflow": "hidden",
                "position": "relative",
                "z-index": "50",
                "background-color": "Silver"
            });
            $("#" + TableID + "_tableHead").css({
                "overflow": "hidden",
                "width"

最低0.47元/天解锁文章

weixin_30483697

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
table表格固定前几列，其余的滚动

我查了好多资料，只找到一个demo<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫