Table固定表头固定列
程序员文章站
2022-06-02 11:51:12
...
1.给HTML中的table增加div,并给ID赋值
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": "" }); } }
});
}
});
推荐阅读