欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Table固定表头固定列

程序员文章站 2022-06-02 11:51:12
...

1.给HTML中的table增加div,并给ID赋值
Table固定表头固定列
2.替换对应的ID名称

//数据处理:给Table外面的div滚动事件绑定一个函数(Table固定表头固定列)
$("#div_ARItems").scroll(function () {
    var left = $("#div_ARItems").scrollLeft();
    var top = $("#div_ARItems").scrollTop();
    var cols = document.getElementById("tb_ARVARIANCEAPPROVAL_ITEMS").rows[0].cells;
    var trs = $("#div_ARItems table tr");
    if (left > 0 && top <= 0) {
        trs.each(function (i) {
            if (i == 0) { for (var k = 0; k < cols.length; k++) { $(this).children().eq(k).css({ "position": "relative", "top": top, "left": "0px", "background-color": "white", "z-index": "10" }); } }
            for (var k = 0; k < 2; k++) { $(this).children().eq(k).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white", "z-index": "20" }); }
        });
    }
    if (top > 0 && left <= 0) {
        trs.each(function (i) {
            if (i == 0) { for (var k = 0; k < cols.length; k++) { $(this).children().eq(k).css({ "position": "relative", "top": top, "left": "0px", "background-color": "white", "z-index": "20" }); } }
            else { for (var k = 0; k < 2; k++) { $(this).children().eq(k).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white", "z-index": "10" }); } }
        });
    }
    if (top > 0 && left > 0) {
        trs.each(function (i) {
            if (i == 0) {
                for (var k = 0; k < cols.length; k++) {
                    if (k < 2) { $(this).children().eq(k).css({ "position": "relative", "top": top, "left": left, "background-color": "white", "z-index": "20" }); }
                    else { $(this).children().eq(k).css({ "position": "relative", "top": top, "left": "0px", "background-color": "white", "z-index": "10" }); }
                }
            } else { for (var k = 0; k < 2; k++) { $(this).children().eq(k).css({ "position": "relative", "top": "0px", "left": left, "background-color": "white", "z-index": "15" }); } }
        });
    }
    if (top <= 0 && left <= 0) {
        trs.each(function (i) {
            if (i == 0) { for (var k = 0; k < cols.length; k++) { $(this).children().eq(k).css({ "position": "" }); } }
            else { for (var k = 0; k < 2; k++) { $(this).children().eq(k).css({ "position": "" }); } }
        });
    }
});
相关标签: JS小功能