使用jQuery

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title>Document</title>
    <style>
        .table-b table td ,.table-b table th {
            border: 1px solid #F00
        }
        .table-b{
            max-width:500px;
        }
    </style>
</head>

<body>
    <div class="table-b">
        <span class="operate-cols" data-id="dd" style="float:right;">显示更多字段</span>
        <table width="400" border="0" cellspacing="0" cellpadding="0">
            <tr id="dd">
                <th width="105">ID</th>
                <th width="181">网址</th>
                <th width="112">功能</th>
                <th width="112">操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>blog.liuguofeng.com</td>
                <td>网站开发</td>
                <td>添加</td>
            </tr>
            <tr>
                <td>CSS5</td>
                <td></td>
                <td>CSS切图</td>
                <td>添加</td>
            </tr>
        </table>
    </div>
</body>

</html>


<style>
    .operate-cols {
        display: inline-block;
        position: relative;
        font-size: 12px;
    }

    .operate-cols-container {
        position: absolute;
        top: 30px;
        right: 20px;
        background-color: #FFF;
        display: none;
        font-size: 12px;
        padding: 0 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .operate-cols-list {
        position: relative;
        min-width: 120px;
        max-height: 200px;
        overflow-y: auto;
        display: block;
    }

    .operate-cols-list label {
        width: 100%;
        text-align: left;
        white-space: nowrap;
        display: block;
        padding: 5px 0;
        line-height: 15px;
    }

    .operate-sel-all {
        display: block;
        text-align: center;
        color: #da3c7f;
    }

    .operate-top {
        display: block;
        padding: 10px 0;
    }
</style>
<script>
    $(function () {
        $(".operate-cols").each(function (opIndex, opItem) {
            var key = 'operate_cols_' + opIndex + location.pathname;
            key = key.replace(/\/\d+$/, '');
            var id = $(opItem).data('id');
            var oldHtml = $(opItem).html();
            var th_list = $("#" + id).find("th");
            var list = [];
            var html = "<span class='operate-cols-container'>";
            html += "<span class='operate-top'><span style='font-weight: 700;'>字段选择</span><span class='operate-cancel-all' style='float:right;'>全部取消</span></span>";
            html += "<span class='operate-cols-list'>";
            th_list.each(function (index, item) {
                var i = {
                    index: index,
                    item: $.trim($(item).text()),
                    hide: $(item).is(':hidden')
                };
                list.push(i);
                html += "<label><input type='checkbox' value='" + i.index + "' " + (i.hide ? '' : 'checked') + ">" + i.item + "</label>";
            });
            html += "</span>";
            html += "<span class='operate-top'><span class='operate-sel-all'>全部选择</span></span>";
            html += "</span>";
            $(opItem).html(oldHtml + html);

            var list_column = {};
            for (var i in list) {
                list_column[list[i]['index']] = list[i]['item']
            }

            //选择显示隐藏
            $(opItem).find(".operate-cols-list input[type='checkbox']").change(function () {
                var ind = $(this).val();
                var checked = $(this).prop('checked');
                var table = $("#" + id).parent();
                var num = parseInt(ind.toString()) + 1;
                table.each(function (index, tr) {
                    if (checked) {
                        $(tr).find("td:nth-child(" + num + ")").show();
                        $(tr).find("th:nth-child(" + num + ")").show();
                    } else {
                        $(tr).find("td:nth-child(" + num + ")").hide();
                        $(tr).find("th:nth-child(" + num + ")").hide();
                    }
                });
                var box_list = $(opItem).find(".operate-cols-list input[type='checkbox']");
                var item_list = {};
                box_list.each(function (index2, item2) {
                    item_list[index2 + '_' + list_column[index2]] = $(item2).prop('checked')
                });
                window.localStorage && window.localStorage.setItem(key, JSON.stringify(item_list))
            });
            //读取本地配置
            var storage = window.localStorage && window.localStorage.getItem(key) || null;
            if (storage) {
                var storage_arr = JSON.parse(storage);
                $(opItem).find('input').each(function (oIndex, oItem) {
                    var oItemChecked = $(oItem).prop('checked');
                    if (storage_arr.hasOwnProperty(oIndex + '_' + list_column[oIndex]) && storage_arr[oIndex + '_' + list_column[oIndex]] !== oItemChecked) {
                        $(oItem).click()
                    }
                });
            }
        });
        $(".operate-cols").click(function (e) {
            var list = $(this).find(".operate-cols-container");
            if (list.is(":hidden")) {
                $(this).find(".operate-cols-container").show();
                e.stopPropagation();
            }
        });
        $(".operate-cols-container").click(function (e) {
            e.stopPropagation();
        });
        $(".operate-sel-all").click(function () {
            var that = $(this).parent().parent().find('.operate-cols-list input');
            that.each(function (allIndex, allItem) {
                var allItemChecked = $(allItem).prop('checked');
                if (allItemChecked === false) {
                    $(allItem).click()
                }
            });
        });
        $(".operate-cancel-all").click(function () {
            var that = $(this).parent().parent().find('.operate-cols-list input');
            that.each(function (allIndex, allItem) {
                var allItemChecked = $(allItem).prop('checked');
                if (allItemChecked === true) {
                    $(allItem).click()
                }
            });
        });
        $(document.body).click(function () {
            $(this).find(".operate-cols-container").hide();
        });
    })
</script>

发表评论

电子邮件地址不会被公开。 必填项已用*标注