本文用到的是三张表同时滚动,并且只在数据大于4条时才进行滚动,数据太少容易有衔接空隙,当鼠标放到表格上时,数据停止滚动,移除鼠标继续滚动。
CSS部分
.gslscrollcss {
background-color: #FFFFFF;
border: solid 1px white;
width: auto;
height: 198px;
}
/*控制表格宽度*/
.tablebox {
/*控制滚动区域高度*/
height: 198px;
overflow: hidden;
position: relative;
width: auto;
/*margin: 100px auto;*/
}
.tbl-header, .tbl-header1, .tbl-header2, .tbl-body, .tbl-body1, .tbl-body2 {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.tbl-header, .tbl-header1, .tbl-header2 {
z-index: 999;
}
/*控制列宽*/
.tablebox table {
width: 100%;
}
#table thead, #table1 thead, #table2 thead {
background-color: #f1f1f1;
}
.tablebox table th,
.tablebox table td {
font-size: 16px;
color: #5d5a5a;
line-height: 40px;
text-align: center;
}
.tablebox table tr th {
cursor: pointer;
}
.tablebox table tr td {
cursor: pointer;
}
.tbl-body tr:nth-child(even) td, .tbl-body1 tr:nth-child(even) td, .tbl-body2 tr:nth-child(even) td {
}
.tablebox table tr td span,
.tablebox table tr td span {
font-size: 16px;
}
HTML部分(主要讲三表使用方法,三张表三个id,表格头和表格内容的class名称不一样,看单表请转到文章末尾链接)
html最外层
<body class="gray-bg" style="background: #fff; padding: 10px;">
<div class="wrapper wrapper-content">
<div class="row" style="box-shadow: 0px 0px 5px #ccc;height:340px; padding: 0 10px 10px 10px;">
<div class="tab-content" style="margin-top:20px;">
<div class="panel-body gslscrollcss" style="padding: 0;">
//第一张表
//第二张表
//第三张表
</div>
</div>
</div>
</div>
</body>
第一张表
<div class="tablebox">
<div class="tbl-header">
<table border="0" cellspacing="0" cellpadding="0" id="table">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
第二张表
<div class="tablebox">
<div class="tbl-header1">
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body1">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
第三张表
<div class="tablebox">
<div class="tbl-header2">
<table border="0" cellspacing="0" cellpadding="0" id="table2">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>时间区间</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body2">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>时间区间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JS部分(post方法和若依获取的表格数据一致:return getDataTable(list);)
$(function () {
var MyMarhq = '';
clearInterval(MyMarhq);
var MyMarhq1 = '';
clearInterval(MyMarhq1);
var MyMarhq2 = '';
clearInterval(MyMarhq2);
$('.tbl-body tbody, .tbl-body1 tbody, .tbl-body2 tbody, .tbl-header tbody, .tbl-header1 tbody, .tbl-header2 tbody').empty();
var str = '';
var Item1 = [];
var Item2 = [];
var Item3 = [];
//第一张表
$.post("/system/board/positiveList", function (res) {
if (res.rows.length === 0) {
$('.tbl-body tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无正向榜数据</td></tr>');
$('.tbl-header tbody').html('');
return;
}
Item1 = res.rows.map(function (row, index) {
return {
"num": (index + 1).toString(),
"deptcode": row.deptcode,
"score": row.score,
"timeinterval": row.timeinterval
};
});
$.each(Item1, function (i, item) {
str = '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + item.deptcode + '</td>' +
'<td>' + item.score + '</td>' +
'<td>' + item.timeinterval + '</td>' +
'</tr>'
$('.tbl-body tbody').append(str);
$('.tbl-header tbody').append(str);
});
if (Item1.length > 4) {
$('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
$('.tbl-body').css('top', '0');
var tblTop = 0;
var speedhq = 120; // 数值越大越慢
var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Item1.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body').css('top', tblTop + 'px');
}
MyMarhq = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header tbody").hover(function () {
clearInterval(MyMarhq);
}, function () {
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq, speedhq);
})
}
});
//第二张表
$.post("/system/board/negativeList", function (res) {
if (res.rows.length === 0) {
$('.tbl-body1 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无负向榜数据</td></tr>');
$('.tbl-header1 tbody').html('');
return;
}
Item2 = res.rows.map(function (row, index) {
return {
"num": (index + 1).toString(),
"deptcode": row.deptcode,
"score": row.score,
"timeinterval": row.timeinterval
};
});
$.each(Item2, function (i, item) {
str = '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + item.deptcode + '</td>' +
'<td>' + item.score + '</td>' +
'<td>' + item.timeinterval + '</td>' +
'</tr>'
$('.tbl-body1 tbody').append(str);
$('.tbl-header1 tbody').append(str);
});
if (Item2.length > 4) {
$('.tbl-body1 tbody').html($('.tbl-body1 tbody').html() + $('.tbl-body1 tbody').html());
$('.tbl-body1').css('top', '0');
var tblTop = 0;
var speedhq = 120; // 数值越大越慢
var outerHeight = $('.tbl-body1 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Item2.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body1').css('top', tblTop + 'px');
}
MyMarhq1 = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header1 tbody").hover(function () {
clearInterval(MyMarhq1);
}, function () {
clearInterval(MyMarhq1);
MyMarhq1 = setInterval(Marqueehq, speedhq);
})
}
});
//第三张表
$.post("/system/board/blackList", function (res) {
if (res.rows.length === 0) {
$('.tbl-body2 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无黑榜数据</td></tr>');
$('.tbl-header2 tbody').html('');
return;
}
Item3 = res.rows.map(function (row, index) {
return {
"num": (index + 1).toString(),
"deptcode": row.deptcode,
"timeinterval": row.timeinterval
};
});
$.each(Item3, function (i, item) {
str = '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + item.deptcode + '</td>' +
'<td>' + item.timeinterval + '</td>' +
'</tr>'
$('.tbl-body2 tbody').append(str);
$('.tbl-header2 tbody').append(str);
});
if (Item3.length > 4) {
$('.tbl-body2 tbody').html($('.tbl-body2 tbody').html() + $('.tbl-body2 tbody').html());
$('.tbl-body2').css('top', '0');
var tblTop = 0;
var speedhq = 120; // 数值越大越慢
var outerHeight = $('.tbl-body2 tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Item3.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body2').css('top', tblTop + 'px');
}
MyMarhq2 = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header2 tbody").hover(function () {
clearInterval(MyMarhq2);
}, function () {
clearInterval(MyMarhq2);
MyMarhq2 = setInterval(Marqueehq, speedhq);
})
}
});
})
单表参考链接:https://www.cnblogs.com/chenqingbin/p/11804669.html
三张表放到nav-tabs选项卡,会出现获取不到第二三张表的高度,导致只有第一张表滚动, 需要给outerHeight指定高度
css部分
.gslscrollcss {
/*color: #ffffff;*/
background-color: #FFFFFF;
border: solid 1px white;
width: auto;
height: 330px;
overflow: scroll;
}
.table-striped table thead {
background-color: transparent;
}
/*控制表格宽度*/
.tablebox {
/*控制滚动高度*/
height: 198px;
overflow: hidden;
position: relative;
width: auto;
/*margin: 100px auto;*/
}
.tbl-header, .tbl-header1, .tbl-header2, .tbl-body, .tbl-body1, .tbl-body2 {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.tbl-header, .tbl-header1, .tbl-header2 {
z-index: 999;
}
/*控制列宽*/
.tablebox table {
width: 100%;
}
#table thead, #table1 thead, #table2 thead {
background-color: #f1f1f1;
}
.tablebox table th,
.tablebox table td {
font-size: 16px;
color: #5d5a5a;
line-height: 40px;
text-align: center;
}
.tablebox table tr th {
cursor: pointer;
}
.tablebox table tr td {
cursor: pointer;
}
.tbl-body tr:nth-child(even) td, .tbl-body1 tr:nth-child(even) td, .tbl-body2 tr:nth-child(even) td {
}
.tablebox table tr td span,
.tablebox table tr td span {
font-size: 16px;
}
html部分
<div class="col-sm-5">
<div style="margin-top:20px; padding:8px 20px;background:#fff;box-shadow:0px 0px 5px rgb(0 0 0 / 5%);border:1px solid rgba(233, 233, 233, 1) ">
<div class="tabMenu">
<ul>
<li class="active"><a href="javascript:void(0);"
onclick="gsl()">本月公示栏>></a></li>
</ul>
</div>
<div id="tabs03" class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#positive"
aria-expanded="true">正向</a></li>
<li class=""><a data-toggle="tab" href="#negative"
aria-expanded="false">负向</a></li>
<li class=""><a data-toggle="tab" href="#black"
aria-expanded="false">黑榜</a></li>
</ul>
<div class="tab-content" style="margin-top:14px;">
<div id="positive" class="tab-pane active">
<div class="panel-body gslscrollcss" style="padding: 0;">
<div class="tablebox" style="height: 300px;">
<div class="tbl-header">
<table border="0" cellspacing="0" cellpadding="0" id="table">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div id="negative" class="tab-pane ">
<div class="panel-body gslscrollcss" style="padding: 0">
<div class="tablebox" style="height: 300px;">
<div class="tbl-header1">
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body1">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>总分</th>
<th>时间区间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<div id="black" class="tab-pane ">
<div class="panel-body gslscrollcss" style="padding: 0">
<div class="tablebox" style="height: 300px;">
<div class="tbl-header2">
<table border="0" cellspacing="0" cellpadding="0" id="table2">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>时间区间</th>
</tr>
</thead>
<tbody style="opacity:0;"></tbody>
</table>
</div>
<div class="tbl-body2">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>排名</th>
<th>单位编码</th>
<th>时间区间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS部分
$(function () {
getBulletinBoard()
})
function getBulletinBoard() {
//正向
var MyMarhq = '';
clearInterval(MyMarhq);
var MyMarhq1 = '';
clearInterval(MyMarhq1);
var MyMarhq2 = '';
clearInterval(MyMarhq2);
$('.tbl-body tbody, .tbl-body1 tbody, .tbl-body2 tbody, .tbl-header tbody, .tbl-header1 tbody, .tbl-header2 tbody').empty();
var str = '';
var Item1 = [];
var Item2 = [];
var Item3 = [];
$.post("/system/board/positiveList", function (res) {
if (res.rows.length === 0) {
$('.tbl-body tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无正向榜数据</td></tr>');
$('.tbl-header tbody').html('');
return;
}
Item1 = res.rows.map(function (row, index) {
return {
"num": (index + 1).toString(),
"deptcode": row.deptcode,
"score": row.score,
"timeinterval": row.timeinterval
};
});
$.each(Item1, function (i, item) {
str = '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + item.deptcode + '</td>' +
'<td>' + item.score + '</td>' +
'<td>' + item.timeinterval + '</td>' +
'</tr>'
$('.tbl-body tbody').append(str);
$('.tbl-header tbody').append(str);
});
if (Item1.length > 5) {
$('.tbl-body tbody').html($('.tbl-body tbody').html() + $('.tbl-body tbody').html());
$('.tbl-body').css('top', '0');
var tblTop = 0;
var speedhq = 120; // 数值越大越慢
var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
function Marqueehq() {
if (tblTop <= -outerHeight * Item1.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body').css('top', tblTop + 'px');
}
MyMarhq = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header tbody").hover(function () {
clearInterval(MyMarhq);
}, function () {
clearInterval(MyMarhq);
MyMarhq = setInterval(Marqueehq, speedhq);
})
}
});
//负向
$.post("/system/board/negativeList", function (res) {
if (res.rows.length === 0) {
$('.tbl-body1 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无负向榜数据</td></tr>');
$('.tbl-header1 tbody').html('');
return;
}
Item2 = res.rows.map(function (row, index) {
return {
"num": (index + 1).toString(),
"deptcode": row.deptcode,
"score": row.score,
"timeinterval": row.timeinterval
};
});
$.each(Item2, function (i, item) {
str = '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + item.deptcode + '</td>' +
'<td>' + item.score + '</td>' +
'<td>' + item.timeinterval + '</td>' +
'</tr>'
$('.tbl-body1 tbody').append(str);
$('.tbl-header1 tbody').append(str);
});
if (Item2.length > 5) {
$('.tbl-body1 tbody').html($('.tbl-body1 tbody').html() + $('.tbl-body1 tbody').html());
$('.tbl-body1').css('top', '0');
var tblTop = 0;
var speedhq = 120; // 数值越大越慢
var outerHeight = 40;
function Marqueehq() {
if (tblTop <= -outerHeight * Item2.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body1').css('top', tblTop + 'px');
}
MyMarhq1 = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header1 tbody").hover(function () {
clearInterval(MyMarhq1);
}, function () {
clearInterval(MyMarhq1);
MyMarhq1 = setInterval(Marqueehq, speedhq);
})
}
});
//黑榜
$.post("/system/board/blackList", function (res) {
if (res.rows.length === 0) {
$('.tbl-body2 tbody').html('<tr><td colspan="4" style="text-align:center;color: #a1a2a3;">暂无黑榜数据</td></tr>');
$('.tbl-header2 tbody').html('');
return;
}
Item3 = res.rows.map(function (row, index) {
return {
"num": (index + 1).toString(),
"deptcode": row.deptcode,
"timeinterval": row.timeinterval
};
});
$.each(Item3, function (i, item) {
str = '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + item.deptcode + '</td>' +
'<td>' + item.timeinterval + '</td>' +
'</tr>'
$('.tbl-body2 tbody').append(str);
$('.tbl-header2 tbody').append(str);
});
if (Item3.length > 5) {
$('.tbl-body2 tbody').html($('.tbl-body2 tbody').html() + $('.tbl-body2 tbody').html());
$('.tbl-body2').css('top', '0');
var tblTop = 0;
var speedhq = 120; // 数值越大越慢
var outerHeight = 40;
function Marqueehq() {
if (tblTop <= -outerHeight * Item3.length) {
tblTop = 0;
} else {
tblTop -= 1;
}
$('.tbl-body2').css('top', tblTop + 'px');
}
MyMarhq2 = setInterval(Marqueehq, speedhq);
// 鼠标移上去取消事件
$(".tbl-header2 tbody").hover(function () {
clearInterval(MyMarhq2);
}, function () {
clearInterval(MyMarhq2);
MyMarhq2 = setInterval(Marqueehq, speedhq);
})
}
});
}