Question

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

我无法弄清楚如何进行更改（哪些列保持隐藏）在页面更改时仍然存在，因为通常的模式是在页面上添加分页表。

我的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字符串替换为您认为会使其在您的网站中独一无二的任何内容，以便两个表的脚本调用不会混淆其他数据（花了一些时间来弄清楚）

Javascript html表隐藏列

1 个答案: