JS实现:数据表格开启同比化显示,增加对比性

对于数据分析的后台展示来说,“数据表格开启同比化显示”效果非常的重要,可以增加对比性。

 

要JS实现:数据表格开启同比化显示也很简单,为了方便,因此,我的样式就用了Layui前端框架,Layui好多JScrip代码其实是用的jquery写的。

 

1、先给大家上个图,展示看看,效果如下:

JS实现:数据表格开启同比化显示

 

2、点击某一个表格行数,会直接只显示某天的数据,对比性一目了然。JS实现:数据表格开启同比化显示

 

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>
    A+
发布日期:2021年01月20日 10:50:23  所属分类:JavaScript
最后更新时间:2021-01-20 10:50:23
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
头像
PowerDesigner数据库设计与建模
  • ¥ 58元
  • 市场价:58元
React.js视频教程:全新React.js16.12技术合集
  • ¥ 69.0元
  • 市场价:69.0元
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元
Photoshop CS视频教程全集:1000集PS课程
  • ¥ 199.0元
  • 市场价:899.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  0   博主  0

  1. 头像 何先生 1

    你的google广告呢

    • 付杰 付杰

      @何先生 给我暂停了,说检测到无效流量。