Javascript html表格隐藏列

Question

我开发了这段简洁的代码，它给出了一个元素和一个格式正确的表格，在元素上创建了一个下拉菜单，允许用户切换列的视图。

我无法弄清楚如何使更改（哪些列保持隐藏）在页面更改时保持不变，因为在页面上放置一个带有分页的表格是一种常见的模式。

小提琴： https://jsfiddle.net/mssrq8ah/

我的 html 标记：

<table id="table">
    <thead>
        <tr>
            <th>h1</th><th>h2</th><th>h3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a1</td><td>a2</td><td>a3</td>
        </tr>
        <tr>
            <td>b1</td><td>b2</td><td>b3</td>
        </tr>
   </tbody>
</table>
<button id="list">drop</button>

我的js函数：

table_hide("#list","#table")
function table_hide( button , table)
         {

             jQuery(button).attr("data-toggle","dropdown");
             jQuery(button).addClass("dropdown-toggle");
             jQuery(button).wrap("<div class='btn-group'>");
             var list = "";
             jQuery("thead").find("tr").first().find("th").each(function(index,element){
                 list = list + "<li>" +
                "<div class='checkbox col-md-6'><label><input type='checkbox' checked value='"+index+"' class='td_hide'>"+jQuery(element).text()+"</label></div>"+
                "</li>";
             });
             jQuery(button).after("<ul class='dropdown-menu col-md-12'>"+list+"</ul>");


            jQuery(".td_hide").on("click",function(){
                        var target_column = jQuery(this).val();
                        jQuery("tr").each(function(index , element){

                            jQuery(this).find("th , td").eq(target_column).toggle();
                        });   
                });

            jQuery(".dropdown-menu").find("select , .ws-popover-opener , .step-control").on("click",function(e){
                e.stopPropagation();
                });
         }

如果可能的话，我想避免更多需要的库，因为我打算在 CMS 上使用它，而 jQuery/bootstrap 是这些天的标准。

Answer 1

瞧！

感谢本地存储，真的帮了我大忙。

https://jsfiddle.net/mssrq8ah/1/

<table id="table">
    <thead>
        <tr>
            <th>h1</th><th>h2</th><th>h3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>a1</td><td>a2</td><td>a3</td>
        </tr>
        <tr>
            <td>b1</td><td>b2</td><td>b3</td>
        </tr>
   </tbody>
</table>
<button id="list">drop</button>

javascript

table_hide("#list","#table")
function table_hide( button , table)
         {
             var cookie_domain = window.location.href + query_params("page")+"hidden";

             jQuery(button).attr("data-toggle","dropdown");
             jQuery(button).addClass("dropdown-toggle");
             jQuery(button).wrap("<div class='btn-group'>");
             var list = "";
             jQuery("thead").find("tr").first().find("th").each(function(index,element){
                 list = list + "<li>" +
                "<div class='checkbox col-md-6'><label><input type='checkbox' checked value='"+index+"' class='td_hide'>"+jQuery(element).text()+"</label></div>"+
                "</li>";
             });
             jQuery(button).after("<ul class='dropdown-menu col-md-12'>"+list+"</ul>");

             jQuery("thead").find("tr").first().find("th").each(function(index , element){
                    if(localStorage.getItem(cookie_domain+index) == "true")
                    {
                        jQuery(".td_hide").eq(index).attr('checked', false);
                        jQuery("tr").each(function(index2 , element2){
                            jQuery(this).find("th , td").eq(index).toggle();
                        });
                    }
                });
            jQuery(".td_hide").on("click",function(){
                        var target_column = jQuery(this).val();
                        jQuery("tr").each(function(index , element){
                            if(jQuery(this).find("th , td").eq(target_column).first().css('display') == 'none')
                            {
                                localStorage.setItem(cookie_domain+target_column, 'false');
                            }
                            else
                            {
                                localStorage.setItem(cookie_domain+target_column, 'true');
                            }
                            jQuery(this).find("th , td").eq(target_column).toggle();
                        });   
                });

            jQuery(".dropdown-menu").find("select , .ws-popover-opener , .step-control").on("click",function(e){
                e.stopPropagation();
                });
         }

 function query_params(name){
               if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
                  return decodeURIComponent(name[1]);
            }

欢迎任何人使用此代码，只要他不为自己声明它~

页面 query_params 部分是为 wordpress 管理页面正确实例化它。您可以将 cookie_domain 字符串替换为您认为可以使其在您的网站上独一无二的任何字符串，这样两个表的脚本的两次调用不会弄乱彼此的数据（我花了一些时间才弄清楚）