function fixedtable(tableId,_option){
var table = document.getElementById(tableId);
//左
for(var i=0;i<table.rows.length;i++){
var row = table.rows[i];
for(var j=0;j<_option.left;j++){
row.cells[j].style.position="sticky";
var weight=0;
for(var z=0;z<j;z++){
weight+=row.cells[z].offsetWidth;
}
row.cells[j].style.zIndex=1;
row.cells[j].style.left=(weight).toString()+"px";
row.cells[j].style.background="#F4F4F5";
/* }*/
}
}
//右
for(var i=0;i<table.rows.length;i++){
var row = table.rows[i];
for(var j=0;j<_option.right;j++){
row.cells[row.cells.length-1-j].style.position="sticky";
var weight=0;
for(var z=0;z<j;z++){
weight+=row.cells[row.cells.length-1-z].offsetWidth;
}
row.cells[row.cells.length-1-j].style.zIndex=1;
row.cells[row.cells.length-1-j].style.right=(weight).toString()+"px";
row.cells[row.cells.length-1-j].style.background="#F4F4F5";
}
table.rows[0].style.position="sticky";
table.rows[0].style.top="0px";
table.rows[0].style.background="#F4F4F5";
}
//上
for(var i=0;i<_option.top;i++){
var row=table.rows[i];
for(var j=0;j<row.cells.length;j++){
row.cells[j].style.position="sticky";
var height=0;
for(var z=0;z<i;z++){
height+=table.rows[z].offsetHeight;
}
row.cells[j].style.top=(height).toString()+"px";
row.cells[j].style.background="#F4F4F5";
}
}
//下
for(var i=0;i<_option.bottom;i++){
var row = table.rows[table.rows.length-1-i];
row.style.position="sticky";
var height=0;
for(var j=0;j<i;j++){
height+=table.rows[table.rows.length-1-j].offsetHeight;
}
row.style.bottom=height.toString()+"px";
row.style.zIndex=3;
row.style.background="#F4F4F5 ";
}
}
window.onload = function(){
fixedtable('table_wrap1',{top:1,bottom:1,left:0,right:0})
}
想将表格的上下左右固定,但是左右的列会覆盖上面的行
var table = document.getElementById(tableId);
//左
for(var i=0;i<table.rows.length;i++){
var row = table.rows[i];
for(var j=0;j<_option.left;j++){
row.cells[j].style.position="sticky";
var weight=0;
for(var z=0;z<j;z++){
weight+=row.cells[z].offsetWidth;
}
row.cells[j].style.zIndex=1;
row.cells[j].style.left=(weight).toString()+"px";
row.cells[j].style.background="#F4F4F5";
/* }*/
}
}
//右
for(var i=0;i<table.rows.length;i++){
var row = table.rows[i];
for(var j=0;j<_option.right;j++){
row.cells[row.cells.length-1-j].style.position="sticky";
var weight=0;
for(var z=0;z<j;z++){
weight+=row.cells[row.cells.length-1-z].offsetWidth;
}
row.cells[row.cells.length-1-j].style.zIndex=1;
row.cells[row.cells.length-1-j].style.right=(weight).toString()+"px";
row.cells[row.cells.length-1-j].style.background="#F4F4F5";
}
table.rows[0].style.position="sticky";
table.rows[0].style.top="0px";
table.rows[0].style.background="#F4F4F5";
}
//上
for(var i=0;i<_option.top;i++){
var row=table.rows[i];
for(var j=0;j<row.cells.length;j++){
row.cells[j].style.position="sticky";
var height=0;
for(var z=0;z<i;z++){
height+=table.rows[z].offsetHeight;
}
row.cells[j].style.top=(height).toString()+"px";
row.cells[j].style.background="#F4F4F5";
}
}
//下
for(var i=0;i<_option.bottom;i++){
var row = table.rows[table.rows.length-1-i];
row.style.position="sticky";
var height=0;
for(var j=0;j<i;j++){
height+=table.rows[table.rows.length-1-j].offsetHeight;
}
row.style.bottom=height.toString()+"px";
row.style.zIndex=3;
row.style.background="#F4F4F5 ";
}
}
window.onload = function(){
fixedtable('table_wrap1',{top:1,bottom:1,left:0,right:0})
}
想将表格的上下左右固定,但是左右的列会覆盖上面的行