html表格固定首行首列

html表格固定首行首列，适用于标准表格，格式如下：

<div><table><tbody><tr><th></th></tr><tr><td></td></tr></tbody></table>
</div>

写了两个方法：

1，表格表头固定,这种方法是copy一个table操作，不会改变原table任何样式，但是不支持原table上面的vue事件

2，对table的tr，th，td处理，过程比上面的方法要复杂，会改变原table的一些样式，table上的事件可以继续调用

在线demo：https://nbin2008.github.io/demo/tableFixHead/index.html

调用：

tableFixHead2({ tableArr: ['tableId'] });

需要注意的是：如果是SPA页面，路由跳转，需要在跳转前手动解绑resize事件

$(window).off('resize.tableId');
$(window).off('resize.null');

方法：

//表格表头固定,这种方法是copy一个table操作，不会改变原table任何样式，但是不支持原table上面的vue事件
tableFixHead({tableArr=[],type=null}) {//默认是固定头部和第一列，可传参数type=head只固定头部let go = function() {tableArr.forEach((id) => {let $table = $(`#${id}`),$cloneTable = $table.clone(true),$parent = $table.parent();$parent.find('.cloneTable').remove();$cloneTable.removeAttr('id').addClass('cloneTable');$parent.append( $cloneTable );$parent.scrollLeft(0);$parent.scrollTop(0);//$cloneTable.css({'border-width': 0,});//let $thOld = $table.find('th'),$th = $cloneTable.find('th'),$tr = $cloneTable.find('tr'),$thFirst = $th.eq(0),widthF = $thFirst.outerWidth() + 1, //这是第一列的宽度heightF = $thFirst.outerHeight();//tr固定宽高,第一行取自身的，其二行起取第一列的宽度$tr.each(function(i,v){if (i==0) {$(v).css({width: $(v).outerWidth() + 1,height: heightF,left: 0,top: 0,});} else {$(v).css({width: widthF,height: heightF,left: 0,top: heightF*i,});}});//th$th.each(function(i,v){$(v).css({width: $thOld.eq(i).outerWidth()+1,left: $thOld.eq(i).position().left,top: 0,})});//td,因为最终只会保留第一列的td，所以可以设置固定的宽度，这个宽度是th第一个的$cloneTable.find('td').each(function(i,v){$(v).css({width: widthF,})});$thFirst.css({'z-index': 2,'background-color': $tr.eq(0).css('background-color'),})$th.css({position: 'absolute',});$tr.css({position: 'absolute',});//$cloneTable.hide();//实际控制元素thFirst，th，tr第二列起//删除第二列起的td，头部第一行不需要删除$tr.each(function(i,v){$(v).find('td:gt(0)').remove();});/** 交互元素分4种情况:tr第一行，tr第二行及以上，th第一列*/let $trF = $tr.eq(0),$trS = $cloneTable.find('tr:gt(0)'),$thF = $th.eq(0);//if (type=='head') {$trS.remove()$parent.off().scroll(function(e){let sTop = e.target.scrollTop,sLeft = e.target.scrollLeft;$trF.css({top: sTop});});} else {$parent.off().scroll(function(e){let sTop = e.target.scrollTop,sLeft = e.target.scrollLeft;$trF.css({top: sTop});$thF.css({left:sLeft});$trS.css({left:sLeft});});}});};go();let timer = null,id = tableArr[0] || 'null';$(window).off('resize.'+id).on('resize.'+id,function(){clearTimeout(timer);console.log('resize');timer = setTimeout(() => {go();},300);});
},
//对table的tr，th，td处理，过程比上面的方法要复杂，会改变原table的一些样式，table上的事件可以继续调用
tableFixHead2({ tableArr = [], type = null }) {//默认是固定头部和第一列，可传参数type=head只固定头部let go = function () {tableArr.forEach((id) => {let $table = $(`#${id}`),$parent = $table.parent(),$tr = $table.find('tr'),$tr0 = $tr.eq(0),$th = $table.find('th'),$th0 = $th.eq(0),$td = $table.find('td'),col = $th.length,row = $tr.length;//在操作之前，要恢复table的默认状态$parent.scrollLeft(0);$parent.scrollTop(0);$tr.css({ 'position': 'static' });$th.css({ 'position': 'static' });$td.css({ 'position': 'static' });//设置th,需要重置宽度//return;$th.css({ 'width': 0 });$td.css({ 'width': 0 });let cache = {tr_height: [],tr_top: [],th_width: [],th_height: [],td_height: [],td_top: [], //td的定位只能相对table}let th0_width = $th.eq(0).outerWidth(),th0_height = $th.eq(0).outerHeight(),tr_width = $tr.eq(0).outerWidth();//收集$tr.each(function(i,v){cache['tr_height'].push( $(v).outerHeight() );cache['tr_top'].push( $(v).position().top );});$th.each(function (i,v) {cache['th_width'].push( $(v).outerWidth() );cache['th_height'].push( $(v).outerHeight() );});$td.each(function(i,v){cache['td_height'].push( $(v).outerHeight() );cache['td_top'].push( $(v).parent().position().top );});//设置th$th.each(function (i, v) {$(v).css({width: cache['th_width'][i],});});//设置td$tr.each(function(i,v){$(v).find('td').each(function(i2,v2){$(v2).css({width: cache['th_width'][i2],height: cache['tr_height'][i],top: cache['tr_top'][i],})});});//给第一列设置背景色$tr.each(function(i,v){$(v).children().eq(0).css({'background-color': $(v).css('background-color'),})});//因为第一行tr绝对定位后，tr的宽度会变化，所以要补丁$table.css({width: tr_width});$tr0.css({left: 0,width: tr_width,'padding-left': th0_width,});//设置th0$th0.css({position: 'absolute',width: th0_width+1,left: 0,top: 0,'z-index': 2,});//设置第一列的td$tr.each(function(i,v){$(v).find('td').eq(0).css({position: 'absolute',left: 0,width: th0_width+1,height: cache['tr_height'][i]+1,});});//在head固定的时候，table会paddint-top，对于td而言，要补上这一差值function setTdPosition(left,top) {if (type=='head') {$tr.each(function(i,v){$(v).find('td').eq(0).css({top: cache['tr_top'][i]+top,})});} else {$tr.each(function(i,v){$(v).find('td').eq(0).css({left: left,top: cache['tr_top'][i]+top,})});$th0.css({left: left,})}};$parent.off().scroll(function (e) {let sTop = e.target.scrollTop,sLeft = e.target.scrollLeft;if (sTop < th0_height) {$tr0.css({ top: 0, position: 'static' });$table.css({ 'padding-top': 0 });setTdPosition(sLeft,0);} else {$tr0.css({ top: sTop, position: 'absolute' });$table.css({ 'padding-top': th0_height });setTdPosition(sLeft,-th0_height+1);}});});};go();let timer = null,id = tableArr[0] || 'null';$(window).off('resize.' + id).on('resize.' + id, function () {clearTimeout(timer);console.log('resize');timer = setTimeout(() => {go();}, 300);});
},

html表格固定首行首列相关推荐

table固定列html5,css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
css+js简单实现table固定首行首列
说明: 使用easyui等都可以实现table固定首行首列的功能. 但仅仅只需要这一个功能,完全可以用css+js简单实现而不用引入更多工具. 网上找到很多的思路,自己对其中比较简单的一个进行了整理. ...
table固定首行首列
原理表格左右拆分,再上下拆分,最后拆分为四个table容器滚动右下table时,加scroll事件,控制左下scrollTop与右上scrollLeft两个table的scroll值注意左下. ...
CSS笔试题: 实现表格首行首列固定和自适应窗口
今天校招笔试题要求实现一个首行首列固定,宽度自适应窗口变化,但窗口缩小到一定宽度不能再缩小,出现水平滚动条- 当时我写错了,我一时想不起改用什么办法首行首列固定,用绝对定位,父亲相对定位-这样会有很多 ...
【Axure视频教程】固定中继器表格首行首列
今天教大家在Axure里如何制作固定中继器表格首行首列的原型模板,包括固定首行(标题行)和首列.固定首行(标题行)和前两列两个案例,因为是用中继器表格制作的,所以使用也非常方便,我们只需要在中继器表格 ...
js实现表格首行首列固定滑动
js+css实现table首行首列的冻结效果. 这个方案是把表格分为4块,首行首列不可滑动,利用onscroll 动态根据内容设置冻结首行首列内容. html <div id="lef ...
HTML 锁定表格首行首列、拖拽表格列宽
摘自:http://s.yanghao.org/program/viewdetail.php?i=61717 因为与自己的实际情况有些不同,简单的改造了下...如果有版权问题,请留言... 锁定Tab ...
手机移动端加载更多（表格首行首列固定vue + vant完整版）
直接看效果图和实现的代码 <van-list:offset="60"v-model="isLoading":finished="finished ...
vue 移动端table表格固定首列和首行（简单粗暴）
效果图,不会做gif...只有静态预览: 上下滑动的时候固定了顶部,并且往左滑的时候冻结了第一列. 代码 : 主要原理就是用 position: sticky;这个属性,粘在top==0px的时候. ...

html表格固定首行首列

html表格固定首行首列相关推荐

最新文章

热门文章