【js】数据表格开启同比化显示，增加对比性

对于数据分析的后台展示来说，此功能超级nice！

先来个图展示看看

点击某一个表格行数，会直接只显示某天的数据，对比性一目了然

代码：


<!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>

备注：此代码纯html 代码，可以直接运行

posted @ 2021-01-18 09:42 依然范儿特西阅读(397) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决

依然范儿特西

代码改变世界QQ群：453011886

【js】数据表格开启同比化显示，增加对比性

公告

积分与排名

随笔分类

阅读排行榜