html设置标头往下滚动隐藏,移动端实现表头固定,tbody滚动,三种方法

实现表头固定,tbody垂直滚动

准备工作:

获取页面可是区域高度

function setIframeHeight() {

var screenHeight = document.documentElement.clientHeight;

}

2.屏幕旋转触发事件

window.addEventListener("resize",()=>{

//正常方向或者屏幕旋转180°

if(window.orientation===180||window.orientation===0){

console.log('竖屏');

}

//屏幕顺时针旋转90°或者逆时针旋转90°

if (window.orientation===90||window.orientation===-90) {

console.log('横屏');

}

})

方法一:两个table

思路:第一个table放表头,第二个table方内容。循环获取tbody第一行单元格的宽度,给thead的单元格,使表头对齐

两个table

.scrollX{overflow-x: scroll}

tr th,td {

border: 1px solid #000;

padding: 8px;

white-space: nowrap;

}

.table-head {

padding-right: 17px;

background-color: #eeeeee;

color: #000;

}

.table-body {

display: block;

height: 300px;

overflow-y: scroll;

}

.table-head table,

.table-body table {

border-collapse: collapse;

width: 100%;

}

.table-body table tr:nth-child(2n+1) {

background-color: #f2f2f2;

}

部门用户名称1月2月3月4月5月6月7月8月9月10月11月12月合计

这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容

//内容第一行

var bodyTR = $(".table-body tr:eq(1) td");

// 一行有多少个单元格

var bodyTRLength = bodyTR.length;

//宽度

var autoW = $('.table-body tbody').width()

var headTR = $(".table-head tr th")

//获取表头高度

var headH=$(".table-head").height();

function setIframeHeight() {

var screenHeight = document.documentElement.clientHeight-headH;

$(".table-body").height(screenHeight);

}

//屏幕发生旋转重新计算高度

window.addEventListener("resize",()=>{

if(window.orientation===180||window.orientation===0){

setIframeHeight();

}if (window.orientation===90||window.orientation===-90) {

setIframeHeight();

}

})

$(function () {

setIframeHeight();

$(".table-head").css("width",autoW+1);

$(".table-body").css("width",autoW+18);

for (var i = 1; i < bodyTRLength; i++) {

var tdW = $(".table-body tr:eq(1) td:eq("+i+")").width()+1;

$(".table-head tr th:eq(" + (i ) + ")").css("width", tdW)

}

})

第二种方法:通过JS实现

思路:监听滚动事件,动态控制表头位置

JS 实现表头tbody固定滚动

.table tr th,td {

border: 1px solid #000;

}

.table-responsive {

overflow-y: scroll;

}

.text-center td {

white-space: nowrap;

padding: 10px;

}

.table-th-css {

background: #efeff4 !important;

position: relative !important;

text-align: center;

top: 0;

white-space: nowrap;

}

.table-th-css div {

border-top: none;

white-space: nowrap;

padding: 10px;

}

.section-scroll {

height: 417px;

}

部门
用户名称
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
合计
这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容这是一个表格内容

$(function() {

setIframeHeight();

});

//屏幕发生旋转重新计算高度

window.addEventListener("resize",()=>{

if(window.orientation===180||window.orientation===0){

setIframeHeight();

}if (window.orientation===90||window.orientation===-90) {

setIframeHeight();

}

})

var tableCont = $(".section-scroll tr th");

//获取th

var tableCont_child = $(".section-scroll tr th div");

//获取th下边的div

var tableScroll = $(".section-scroll");

//获取滚动条同级的class

function scrollHandle() {

console.log(1)

var scrollTop = tableScroll.scrollTop();

// 当滚动距离大于0时设置top及相应的样式

if (scrollTop > 0) {

tableCont.css({"top": scrollTop + "px", "padding":"0"

});

tableCont_child.css({"borderTop": "1px solid #000","borderBottom": "1px solid #000","marginTop": "-1px","padding": "8px"

});

} else {

// 当滚动距离小于0时设置top及相应的样式

tableCont.css({ "top": scrollTop + "px", "marginTop": "0" });

tableCont_child.css({ "border": "none", "marginTop": 0, "marginBottom": 0, })

}

}

tableScroll.on("scroll", scrollHandle);

//获取可是区域高度

function setIframeHeight() {

var screenHeight = document.documentElement.clientHeight;

$(".section-scroll").height(screenHeight);

}

第三种方法 通过easyui实现

思路,引用easyui文件并实现触加载更多数据,合计行

Basic DataGrid - jQuery EasyUI Mobile Demo

body{

margin: 0;

padding: 0;

}

.datagrid-footer td{

color: red

}

Basic DataGrid

Item IDProductList PriceUnit Cost

var data ={

"total":5,

"rows":[

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

],

"footer":[{"productid":"合计","unitcost":"1203.00","listprice":"5895.00"}]

};

var pushdata =[

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

];

$(function(){

var screenHeight = document.documentElement.clientHeight;

var pageNum=1

$("#dg").datagrid({

header:'#hh',

height:screenHeight,

data:data,

singleSelect:true,

showFooter : true,

//view:bufferview,

rownumbers:true,

pageSize:30

})

var scrollDiv = $(".datagrid-body").get(1);

console.log(pushdata)

$(scrollDiv).scroll(function(){

console.log("gundong")

var that=this;

var cango=true;

var scrollH=scrollDiv.scrollTop+scrollDiv.clientHeight

if(scrollH==scrollDiv.scrollHeight&&cango==true){

for(var i=0;i

var row_data = {

itemid : pushdata[i].itemid,

productid :pushdata[i].productid,

listprice: pushdata[i].listprice,

unitcost : pushdata[i].unitcost,

};

$('#dg').datagrid('appendRow', row_data);

}

}

})

});

//计算表格高度

function setIframeHeight() {

var screenHeight = document.documentElement.clientHeight;

$(".table-body").height(screenHeight);

$('#dg').datagrid("resize",{

height: screenHeight

}

);

}

//屏幕发生旋转重新计算高度

window.addEventListener("resize",()=>{

if(window.orientation===180||window.orientation===0){

setIframeHeight();

}if (window.orientation===90||window.orientation===-90) {

setIframeHeight();

}

})

优缺点分析

EasyUI => ios:无问题;安卓:横向滚动表头抖动

JS => ios:无问题;安卓:垂直滚动表头抖动

两个table=> ios:无法横向滚动;安卓:无问题

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值