【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  依然范儿特西  阅读(378)  评论(0)  编辑  收藏  举报