如何显示/隐藏表中的列。？ [英] How to show/hide columns in table.?

问题描述

我在桌面设计之下尝试过，但我无法取得成功。 
 

plz help..thanks



我尝试了什么：

< p> 
< input type =checkboxname =ProjectGroupNamechecked =checked> ProjectGroupName 
< input type =checkboxname =ProjectName> ProjectName 
< input type =checkboxname =BugIDchecked =checked> BugID 
< / p> 
 
< table class =table table-striped table-bordered table-hovercellspacing =0rules =allborder =1id =ctl00_ContentPlaceHolder1_GridViewUserControlnew_grdUserControlstyle =border-崩溃：崩溃;> 
< tr> 
< th name =ProjectGroupNamescope =col>< a href =javascript：__ doPostBack（'ctl00 $ ContentPlaceHolder1 $ GridViewUserControlnew $ grdUserControl'，'Sort $ ProjectGroupName'）> ProjectGroupName< / A>< /第> 
< th name =ProjectNamescope =col>< a href =javascript：__ doPostBack（'ctl00 $ ContentPlaceHolder1 $ GridViewUserControlnew $ grdUserControl'，'Sort $ ProjectName'）> ProjectName< / A>< /第> 
< th name =BugIDscope =col>< a href =javascript：__ doPostBack（'ctl00 $ ContentPlaceHolder1 $ GridViewUserControlnew $ grdUserControl'，'Sort $ BugID'）> BugID< / A>< /第> 
< / tr> 
< tr> 
< td name =ProjectGroupName>测试组< / td> 
< td name =ProjectName> 7.3< / td> 
< td name =BugID> 36244< / td> 
< / tr> 
< tr> 
< td name =ProjectGroupName>测试组2< / td> 
< td name =ProjectName>接口1.1< / td> 
< td name =BugID> 3212< / td> 
< / tr> 
< tr> 
< td name =ProjectGroupName>团队管理< / td> 
< td name =ProjectName> RR CE< / td> 
< td name =BugID> 3232< / td> 
< / tr> 
< tr> 
< td name =ProjectGroupName>测试组3< / td> 
< td name =ProjectName>测试项目< / td> 
< td name =BugID> 1< / td> 
< / tr> 
< / table> 
 
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script> 
< script> 
 $（input：checkbox：not（：checked））。each（function（）{
 var column =table。+ $（this）.attr（name）; 
 $（列）.hide（）; 
}）; 
 
 $（输入：复选框）。click（function（）{
 var column =table。+ $（this）.attr（name）; 
 $（列）.toggle（）; 
}）; 
< / script> 

解决方案

ContentPlaceHolder1

GridViewUserControlnew

grdUserControl '' 排序

I have tried below the table design, but I m not able to success.

plz help..thanks

What I have tried:

<p>
    <input type="checkbox" name="ProjectGroupName" checked="checked"> ProjectGroupName
    <input type="checkbox" name="ProjectName">ProjectName
    <input type="checkbox" name="BugID" checked="checked"> BugID
</p>

<table class="table table-striped table-bordered table-hover" cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_GridViewUserControlnew_grdUserControl" style="border-collapse:collapse;">
    <tr>
        <th name="ProjectGroupName" scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridViewUserControlnew$grdUserControl','Sort$ProjectGroupName')">ProjectGroupName</a></th>
        <th name="ProjectName" scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridViewUserControlnew$grdUserControl','Sort$ProjectName')">ProjectName</a></th>
        <th name="BugID" scope="col"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$GridViewUserControlnew$grdUserControl','Sort$BugID')">BugID</a></th>
    </tr>
    <tr> 
        <td name="ProjectGroupName">Test Group</td>
        <td name="ProjectName">7.3</td>
        <td name="BugID">36244</td>
    </tr>
    <tr>
        <td name="ProjectGroupName">Test Group 2</td>
        <td name="ProjectName">Interface 1.1</td>
        <td name="BugID">3212</td>
    </tr>
    <tr>
        <td name="ProjectGroupName">Team Management</td>
        <td name="ProjectName">RR CE</td>
        <td name="BugID">3232</td>
    </tr>
    <tr>
        <td name="ProjectGroupName">Test Group 3</td>
        <td name="ProjectName">Testing Project</td>
        <td name="BugID">1</td>
    </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $("input:checkbox:not(:checked)").each(function () {
        var column = "table ." + $(this).attr("name");
        $(column).hide();
    });

    $("input:checkbox").click(function () {
        var column = "table ." + $(this).attr("name");
        $(column).toggle();
    });
</script>

解决方案

ContentPlaceHolder1

GridViewUserControlnew

grdUserControl','Sort

这篇关于如何显示/隐藏表中的列。？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！