blocks|key|1432917|text|您可以使用colgroups：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1432918|<table>
++++<colgroup>
+++++++<col+class="visible_class"/>
+++++++<col+class="visible_class"/>
+++++++<col+class="invisible_class"/>++
++++</colgroup>
++++<thead>
++++++++<tr><th+class="col1">Header+1</th><th+class="col2">Header+2</th><th+class="col3">Header+3</th></tr>
++++</thead>
++++<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
++++<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
++++<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
++++<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>|code-block|syntax|javascript|1432919|然后，您的脚本可以只更改desire+<col>类。|offset|length|style|CODE|1432920|entityMap^0|0|0|J|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>you could use colgroups:</p>

<pre><code>&lt;table&gt;
    &lt;colgroup&gt;
       &lt;col class="visible_class"/&gt;
       &lt;col class="visible_class"/&gt;
       &lt;col class="invisible_class"/&gt;  
    &lt;/colgroup&gt;
    &lt;thead&gt;
        &lt;tr&gt;&lt;th class="col1"&gt;Header 1&lt;/th&gt;&lt;th class="col2"&gt;Header 2&lt;/th&gt;&lt;th class="col3"&gt;Header 3&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>your script then could change just the desire <code>&lt;col&gt;</code> class.</p>


blocks|key|1647818|text|以下命令应该可以完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647819|$("input[type='checkbox']").click(function()+{
++++var+index+=+$(this).attr('name').substr(2);
++++$('table+tr').each(function()+{+
++++++++$('td:eq('+%2B+index+%2B+')',this).toggle();
++++});
});|code-block|syntax|javascript|1647820|这是未经测试的代码，但原则是在每一行中选择与从复选框名称中提取的所选索引相对应的表格单元格。当然，您可以使用类或ID来限制选择器。|1647821|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The following should do it:</p>

<pre><code>$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});
</code></pre>

<p>This is untested code, but the principle is that you choose the table cell in each row that corresponds to the chosen index extracted from the checkbox name. You could of course limit the selectors with a class or an ID.</p>


blocks|key|1432986|text|以下代码是在Eran的代码基础上构建的，并做了一些小改动。经过测试，它似乎在Firefox3、IE7上运行良好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1432987|<!DOCTYPE+HTML+PUBLIC+"-//W3C//DTD+HTML+4.01+Transitional//EN"+
++++++++++++++++"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script+src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function()+{
++++$('input[type="checkbox"]').click(function()+{
++++++++var+index+=+$(this).attr('name').substr(3);
++++++++index--;
++++++++$('table+tr').each(function()+{+
++++++++++++$('td:eq('+%2B+index+%2B+')',this).toggle();
++++++++});
++++++++$('th.'+%2B+$(this).attr('name')).toggle();
++++});
});
</script>
<body>
<table>
<thead>
++++<tr>
++++++++<th+class="col1">Header+1</th>
++++++++<th+class="col2">Header+2</th>
++++++++<th+class="col3">Header+3</th>
++++</tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
++++<input+type="checkbox"+name="col1"+checked="checked"+/>+Hide/Show+Column+1+<br+/>
++++<input+type="checkbox"+name="col2"+checked="checked"+/>+Hide/Show+Column+2+<br+/>
++++<input+type="checkbox"+name="col3"+checked="checked"+/>+Hide/Show+Column+3+<br+/>
</form>
</body>
</html>|code-block|syntax|javascript|1432988|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The following is building on Eran's code, with a few minor changes. Tested it and it seems to work fine on Firefox 3, IE7.</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;script&gt;
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
&lt;/script&gt;
&lt;body&gt;
&lt;table&gt;
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th class="col1"&gt;Header 1&lt;/th&gt;
        &lt;th class="col2"&gt;Header 2&lt;/th&gt;
        &lt;th class="col3"&gt;Header 3&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;form&gt;
    &lt;input type="checkbox" name="col1" checked="checked" /&gt; Hide/Show Column 1 &lt;br /&gt;
    &lt;input type="checkbox" name="col2" checked="checked" /&gt; Hide/Show Column 2 &lt;br /&gt;
    &lt;input type="checkbox" name="col3" checked="checked" /&gt; Hide/Show Column 3 &lt;br /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1647907|text|没有课？然后，您可以使用标记：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647908|var+tds+=+document.getElementsByTagName('TD'),i;
for+(i+in+tds)+{
++tds[i].style.display+=+'none';
}|code-block|syntax|javascript|1647909|并向他们展示其用法：|1647910|...style.display+=+'table-cell';++++++++++++|1647911|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Without class? You can use the Tag then:</p>

<pre><code>var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}
</code></pre>

<p>And to show them use:</p>

<pre><code>...style.display = 'table-cell';            
</code></pre>


blocks|key|1433086|text|当然，CSS是browsers+that+support+nth-child的唯一方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1433087|table+td:nth-child(2)+{+display:+none;+}|1433088|这是针对IE9和更新版本的。|1433089|对于您的用例，您需要几个类来隐藏列：|1433090|.hideCol1+td:nth-child(1)+{+display:+none;}
.hideCol2+td:nth-child(2)+{+display:+none;}|code-block|syntax|javascript|1433091|ect...|1433092|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=css-sel3^0|T|9|7|L|0|0|0|14|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1A|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1B|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1C|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>And of course, the CSS only way for <a href="http://caniuse.com/#feat=css-sel3" rel="nofollow">browsers that support</a> <code>nth-child</code>:</p>

<p><code>table td:nth-child(2) { display: none; }</code></p>

<p>This is for IE9 and newer.</p>

<p>For your usecase, you'd need several classes to hide the columns:</p>

<pre><code>.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}
</code></pre>

<p>ect...</p>


blocks|key|1433107|text|<p><input+type="checkbox"+name="ch1"+checked="checked"+/>+First+Name</p>
....+
<td+class="ch1">...</td>

+<script>
+++++++$(document).ready(function()+{
++++++++++++$('#demo').multiselect();
++++++++});


++++++++$("input:checkbox:not(:checked)").each(function()+{
++++var+column+=+"table+."+%2B+$(this).attr("name");
++++$(column).hide();
});

$("input:checkbox").click(function(){
++++var+column+=+"table+."+%2B+$(this).attr("name");
++++$(column).toggle();
});
+</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1433108|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;p&gt;&lt;input type="checkbox" name="ch1" checked="checked" /&gt; First Name&lt;/p&gt;
.... 
&lt;td class="ch1"&gt;...&lt;/td&gt;

 &lt;script&gt;
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("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();
});
 &lt;/script&gt;
</code></pre>


blocks|key|1648091|text|这是一个功能更完善的答案，它在每个列的基础上提供了一些用户交互。如果这将是一种动态体验，则需要在每一列上有一个可点击的切换，以指示隐藏该列的能力，然后恢复以前隐藏的列的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1648092|在JavaScript中看起来像这样：|1648093|$('.hide-column').click(function(e){
++var+$btn+=+$(this);
++var+$cell+=+$btn.closest('th,td')
++var+$table+=+$btn.closest('table')

++//+get+cell+location+-+https://stackoverflow.com/a/4999018/1366033
++var+cellIndex+=+$cell[0].cellIndex+%2B+1;

++$table.find(".show-column-footer").show()
++$table.find("tbody+tr,+thead+tr")
++++++++.children(":nth-child("%2BcellIndex%2B")")
++++++++.hide()
})

$(".show-column-footer").click(function(e)+{
++++var+$table+=+$(this).closest('table')
++++$table.find(".show-column-footer").hide()
++++$table.find("th,+td").show()

})|code-block|syntax|javascript|1648094|为了支持这一点，我们将向表中添加一些标记。在每个列标题中，我们可以添加类似这样的内容，以提供可单击内容的可视指示器|1648095|<button+class="pull-right+btn+btn-default+btn-condensed+hide-column"+
++++++++++++data-toggle="tooltip"+data-placement="bottom"+title="Hide+Column">
++++<i+class="fa+fa-eye-slash"></i>++
</button>|1648096|我们将允许用户通过表脚中的链接恢复列。如果它在默认情况下不是持久的，那么在头中动态地切换它可能会在表中争先恐后，但你真的可以把它放在你想放的任何地方：|1648097|<tfoot+class="show-column-footer">
+++<tr>
++++<th+colspan="4"><a+class="show-column"+href="#">Some+columns+hidden+-+click+to+show+all</a></th>
++</tr>
</tfoot>|1648098|这是基本的功能。下面是一个演示，其中包含了更多内容。您还可以向按钮添加工具提示以帮助阐明其用途，将按钮的样式更有机地设置为表格标题，并折叠列宽，以便添加一些(有点不稳定的)+css动画，以减少过渡的跳跃性。|1648099|​|1648100|📷|atomic|offset|length|1648101|1648102|jsFiddle和堆栈片段中的工作演示：|1648103|1648104|$(function()+{
++//+on+init
++$(".table-hideable+.hide-col").each(HideColumnIndex);

++//+on+click
++$('.hide-column').click(HideColumnIndex)

++function+HideColumnIndex()+{
++++var+$el+=+$(this);
++++var+$cell+=+$el.closest('th,td')
++++var+$table+=+$cell.closest('table')

++++//+get+cell+location+-+https://stackoverflow.com/a/4999018/1366033
++++var+colIndex+=+$cell[0].cellIndex+%2B+1;

++++//+find+and+hide+col+index
++++$table.find("tbody+tr,+thead+tr")
++++++.children(":nth-child("+%2B+colIndex+%2B+")")
++++++.addClass('hide-col');
++++++
++++//+show+restore+footer
++++$table.find(".footer-restore-columns").show()
++}

++//+restore+columns+footer
++$(".restore-columns").click(function(e)+{
++++var+$table+=+$(this).closest('table')
++++$table.find(".footer-restore-columns").hide()
++++$table.find("th,+td")
++++++.removeClass('hide-col');

++})

++$('[data-toggle="tooltip"]').tooltip({
++++trigger:+'hover'
++})

})|1648105|body+{
++padding:+15px;
}

.table-hideable+td,
.table-hideable+th+{
++width:+auto;
++transition:+width+.5s,+margin+.5s;
}

.btn-condensed.btn-condensed+{
++padding:+0+5px;
++box-shadow:+none;
}


/*+use+class+to+have+a+little+animation+*/
.hide-col+{
++width:+0px+!important;
++height:+0px+!important;
++display:+block+!important;
++overflow:+hidden+!important;
++margin:+0+!important;
++padding:+0+!important;
++border:+none+!important;
}|1648106|<link+rel="stylesheet"+type="text/css"+href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link+rel="stylesheet"+type="text/css"+href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link+rel="stylesheet"+type="text/css"+href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script+type="text/javascript"+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script+type="text/javascript"+src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>




<table+class="table+table-condensed+table-hover+table-bordered+table-striped+table-hideable">

++<thead>
++++<tr>
++++++<th>
++++++++Controller
++++++++<button+class="pull-right+btn+btn-default+btn-condensed+hide-column"+data-toggle="tooltip"+data-placement="bottom"+title="Hide+Column">
++++++++++<i+class="fa+fa-eye-slash"></i>++
++++++++</button>
++++++</th>
++++++<th+class="hide-col">
++++++++Action
++++++++<button+class="pull-right+btn+btn-default+btn-condensed+hide-column"+data-toggle="tooltip"+data-placement="bottom"+title="Hide+Column">
++++++++++<i+class="fa+fa-eye-slash"></i>++
++++++++</button>
++++++</th>
++++++<th>
++++++++Type
++++++++<button+class="pull-right+btn+btn-default+btn-condensed+hide-column"+data-toggle="tooltip"+data-placement="bottom"+title="Hide+Column">
++++++++++<i+class="fa+fa-eye-slash"></i>++
++++++++</button>
++++++</th>
++++++<th>
++++++++Attributes
++++++++<button+class="pull-right+btn+btn-default+btn-condensed+hide-column"+data-toggle="tooltip"+data-placement="bottom"+title="Hide+Column">
++++++++++<i+class="fa+fa-eye-slash"></i>++
++++++++</button>
++++++</th>
++</thead>
++<tbody>

++++<tr>
++++++<td>Home</td>
++++++<td>Index</td>
++++++<td>ActionResult</td>
++++++<td>Authorize</td>
++++</tr>

++++<tr>
++++++<td>Client</td>
++++++<td>Index</td>
++++++<td>ActionResult</td>
++++++<td>Authorize</td>
++++</tr>

++++<tr>
++++++<td>Client</td>
++++++<td>Edit</td>
++++++<td>ActionResult</td>
++++++<td>Authorize</td>
++++</tr>

++</tbody>
++<tfoot+class="footer-restore-columns">
++++<tr>
++++++<th+colspan="4"><a+class="restore-columns"+href="#">Some+columns+hidden+-+click+to+show+all</a></th>
++++</tr>
++</tfoot>
</table>|1648107|1648108|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/796209d36e4f51928025db80753b0e2b.gif|imageAlt|1|LINK|MUTABLE|url|https://jsfiddle.net/KyleMit/rr96p4vv/^0|0|0|0|0|0|0|0|0|0|0|1|0|0|0|0|8|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1S|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1U|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1W|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1X|8|@]|9|@$X|1Y|Y|1Z|1|20]]|A|$]]|$1|Z|3|T|5|6|7|21|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|22|8|@]|9|@$X|23|Y|24|1|25]]|A|$]]|$1|12|3|T|5|6|7|26|8|@]|9|@]|A|$]]|$1|13|3|14|5|F|7|27|8|@]|9|@]|A|$G|H]]|$1|15|3|16|5|F|7|28|8|@]|9|@]|A|$G|H]]|$1|17|3|18|5|F|7|29|8|@]|9|@]|A|$G|H]]|$1|19|3|T|5|6|7|2A|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|2B|8|@]|9|@]|A|$]]]|1B|$1C|$5|1D|1E|1F|A|$1G|1H|1I|-4]]|1J|$5|1K|1E|1L|A|$1M|1N]]]]

<p>Here's a little more fully featured answer that provides some user interaction on a per column basis.  If this is going to be a dynamic experience, there needs to be a clickable toggle on each column that indicates the ability to hide the column, and then a way to restore previously hidden columns.  </p>

<p>That would look something like this in JavaScript:</p>

<pre class="lang-js prettyprint-override"><code>$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})
</code></pre>

<p>To support this, we'll add some markup to the table.  In each column header, we can add something like this to provide a visual indicator of something clickable</p>

<pre class="lang-html prettyprint-override"><code>&lt;button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column"&gt;
    &lt;i class="fa fa-eye-slash"&gt;&lt;/i&gt;  
&lt;/button&gt;
</code></pre>

<p>We'll allow the user to restore columns via a link in the table footer.  If it's not persistent by default, then toggling it on dynamically in the header could jostle around the table, but you can really put it anywhere you'd like:</p>

<pre class="lang-html prettyprint-override"><code>&lt;tfoot class="show-column-footer"&gt;
   &lt;tr&gt;
    &lt;th colspan="4"&gt;&lt;a class="show-column" href="#"&gt;Some columns hidden - click to show all&lt;/a&gt;&lt;/th&gt;
  &lt;/tr&gt;
&lt;/tfoot&gt;
</code></pre>

<p>That's the basic functionality. Here's a demo below with a couple more things fleshed out. You can also add a tooltip to the button to help clarify its purpose, style the button a little more organically to a table header, and collapse the column width in order to add some (somewhat wonky) css animations to make the transition a little less jumpy.</p>

<p><a href="https://i.stack.imgur.com/r0wDN.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/r0wDN.gif" alt="Demo Screengrab"></a></p>

<h3>Working Demo in <a href="https://jsfiddle.net/KyleMit/rr96p4vv/" rel="noreferrer">jsFiddle</a> &amp; Stack Snippets:</h3>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var colIndex = $cell[0].cellIndex + 1;

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css"&gt;
&lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;




&lt;table class="table table-condensed table-hover table-bordered table-striped table-hideable"&gt;

  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;
        Controller
        &lt;button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"&gt;
          &lt;i class="fa fa-eye-slash"&gt;&lt;/i&gt;  
        &lt;/button&gt;
      &lt;/th&gt;
      &lt;th class="hide-col"&gt;
        Action
        &lt;button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"&gt;
          &lt;i class="fa fa-eye-slash"&gt;&lt;/i&gt;  
        &lt;/button&gt;
      &lt;/th&gt;
      &lt;th&gt;
        Type
        &lt;button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"&gt;
          &lt;i class="fa fa-eye-slash"&gt;&lt;/i&gt;  
        &lt;/button&gt;
      &lt;/th&gt;
      &lt;th&gt;
        Attributes
        &lt;button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column"&gt;
          &lt;i class="fa fa-eye-slash"&gt;&lt;/i&gt;  
        &lt;/button&gt;
      &lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;

    &lt;tr&gt;
      &lt;td&gt;Home&lt;/td&gt;
      &lt;td&gt;Index&lt;/td&gt;
      &lt;td&gt;ActionResult&lt;/td&gt;
      &lt;td&gt;Authorize&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;Client&lt;/td&gt;
      &lt;td&gt;Index&lt;/td&gt;
      &lt;td&gt;ActionResult&lt;/td&gt;
      &lt;td&gt;Authorize&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
      &lt;td&gt;Client&lt;/td&gt;
      &lt;td&gt;Edit&lt;/td&gt;
      &lt;td&gt;ActionResult&lt;/td&gt;
      &lt;td&gt;Authorize&lt;/td&gt;
    &lt;/tr&gt;

  &lt;/tbody&gt;
  &lt;tfoot class="footer-restore-columns"&gt;
    &lt;tr&gt;
      &lt;th colspan="4"&gt;&lt;a class="restore-columns" href="#"&gt;Some columns hidden - click to show all&lt;/a&gt;&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I have an HTML table with several columns and I need to implement a column chooser using jquery.  When a user clicks on a checkbox I want to hide/show the corresponding column in the table.  I would like to do this without attaching a class to every td in the table, is there a way to select an entire column using jquery?  Below is an example of the HTML.</p>

<pre><code>&lt;table&gt;
    &lt;thead&gt;
        &lt;tr&gt;&lt;th class="col1"&gt;Header 1&lt;/th&gt;&lt;th class="col2"&gt;Header 2&lt;/th&gt;&lt;th class="col3"&gt;Header 3&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Column1&lt;/td&gt;&lt;td&gt;Column2&lt;/td&gt;&lt;td&gt;Column3&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

&lt;form&gt;
    &lt;input type="checkbox" name="col1" checked="checked" /&gt; Hide/Show Column 1 &lt;br /&gt;
    &lt;input type="checkbox" name="col2" checked="checked" /&gt; Hide/Show Column 2 &lt;br /&gt;
    &lt;input type="checkbox" name="col3" checked="checked" /&gt; Hide/Show Column 3 &lt;br /&gt;
&lt;/form&gt;
</code></pre>


Hide/Show Column in an HTML Table

我有一个包含多个列的HTML表，我需要使用jquery实现一个列选择器。当用户单击复选框时，我希望隐藏/显示表中相应的列。我想在不给表中的每个td附加一个类的情况下做到这一点，有没有一种方法可以使用jquery选择整个列？下面是HTML的一个例子。<table>    <thead>        <tr><th cl...

问隐藏/显示HTML表中的列
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏/显示HTML表中的列EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏/显示HTML表中的列
EN