对于数据分析的后台展示来说，“数据表格开启同比化显示”效果非常的重要，可以增加对比性。
要JS实现：数据表格开启同比化显示也很简单，为了方便，因此，我的样式就用了Layui前端框架，Layui好多JScrip代码其实是用的jquery写的。
1、先给大家上个图，展示看看，效果如下：
2、点击某一个表格行数，会直接只显示某天的数据，对比性一目了然。
3、html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<blockquote class="layui-elem-quote">
本页面只是演示表格开启同比，特别适用用数据统计后台看数据适用
</blockquote>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>laofany演示</legend>
</fieldset>
<div class="layui-form">
<div id="table-responsive">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>星期</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>星期一</td>
</tr>
<tr>
<td>2</td>
<td>星期二</td>
</tr>
<tr>
<td>3</td>
<td>星期三</td>
</tr>
<tr>
<td>4</td>
<td>星期四</td>
</tr>
<tr>
<td>5</td>
<td>星期五</td>
</tr>
<tr>
<td>6</td>
<td>星期六</td>
</tr>
<tr>
<td>7</td>
<td>星期日</td>
</tr>
<tr>
<td>1</td>
<td>星期一</td>
</tr>
<tr>
<td>2</td>
<td>星期二</td>
</tr>
<tr>
<td>3</td>
<td>星期三</td>
</tr>
<tr>
<td>4</td>
<td>星期四</td>
</tr>
<tr>
<td>5</td>
<td>星期五</td>
</tr>
<tr>
<td>6</td>
<td>星期六</td>
</tr>
<tr>
<td>7</td>
<td>星期日</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://www.layuicdn.com/auto/layui.js" v="2.5.6" e="layui"></script>
<script>
layui.use(['form', 'jquery'], function() {
var form = layui.form
, layer = layui.layer
, $ = layui.jquery;
var open_num = 3; //此处以七天为周期，查看
var is_open = true;
if (is_open) {
var st90 = setInterval(function () {
var $table = $('#table-responsive');
if ($table.length > 0) {
clearTimeout(st90);
// mouseover
$table.find("table > tbody > tr").on('mouseover', function () {
var $this = $(this);
var currentEleIndex = $this.index() % open_num;
$table.find("table > tbody > tr").each(function () {
var $this = $(this);
if ($this.index() % open_num === currentEleIndex) {
$this.stop().css('background-color', '#eee');
} else {
$this.stop().css('background-color', '');
}
});
});
// click
$table.find("table > tbody > tr").on('click', function (e) {
var $this = $(this);
var currentEleIndex = $this.index() % open_num;
var attrName = 'data-is-ring-ratio';
if ('1' === $table.attr(attrName)) {
$table.find("table > tbody > tr").each(function (index) {
var $this = $(this);
$this.css('display', '');
});
$table.attr(attrName, 0);
} else {
$table.find("table > tbody > tr").each(function (index) {
var $this = $(this);
if (index % open_num !== currentEleIndex) {
$this.css("display", "none");
}
});
$table.attr(attrName, 1);
}
});
}
}, 200);
}
});
</script>
</body>
</html>
2021年01月24日 10:23:00 沙发
你的google广告呢
2021年01月24日 10:35:42 1层
@何先生 给我暂停了，说检测到无效流量。