Dieser Artikel verwendet drei Tabellen zum gleichzeitigen Scrollen und scrollt nur, wenn die Daten größer als 4 sind. Wenn zu wenig Daten vorhanden sind, treten Lücken in der Verbindung auf. Wenn die Maus auf der Tabelle platziert wird, werden die Daten angezeigt Stoppen Sie den Bildlauf und die Maus scrollt weiter.
CSS-Teil
.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-Teil (hauptsächlich geht es um die Verwendung von drei Tabellen, drei Tabellen mit drei IDs, die Klassennamen des Tabellenkopfes und des Tabelleninhalts sind unterschiedlich. Klicken Sie bitte auf den Link am Ende des Artikels, um die einzelne Tabelle zu lesen.)
html äußerst
<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>
erster Tisch
<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>
zweiter Tisch
<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>
dritter Tisch
<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-Teil (die Post-Methode stimmt mit den von Ruoyi erhaltenen Tabellendaten überein: 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);
})
}
});
})
Referenzlink für eine einzelne Tabelle: https://www.cnblogs.com/chenqingbin/p/11804669.html
Wenn die drei Tabellen auf der Registerkarte „Navigationsregisterkarten“ platziert werden, wird die Höhe der zweiten und dritten Tabelle nicht ermittelt, sodass nur die erste Tabelle gescrollt wird und die Höhe für „outerHeight“ angegeben werden muss
CSS-Teil
.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-Teil
<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-Teil
$(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);
})
}
});
}