HTML 表中的隐藏/显示列

小开

你可以使用 colgroup:

<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>

你的脚本，然后可以改变只是愿望 <col>类。

小开

下面应该做到这一点:

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

这是未经测试的代码，但其原理是在每一行中选择对应于从复选框名称中提取的所选索引的表单元格。当然，您可以使用类或 ID 来限制选择器。

小开

下面是在 Eran 代码的基础上构建的，只做了一些小的更改。经过测试，它似乎在 Firefox 3，IE7上运行良好。

<!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(' + index + ')',this).toggle();
});
$('th.' + $(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>

小开

最佳答案

我希望在做这件事的时候不要给每个 td 都附加一个类

就个人而言，我会使用 class-on-each-td/th/coll 方法。然后，您可以在容器上使用一次对 className 的写操作来打开和关闭列，假设样式规则如下:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

这将比任何 JS 循环方法都要快; 对于非常长的表，它可以对响应性产生重大影响。

如果不支持 IE6，那么可以使用邻接选择器来避免向 tds 添加 class 属性。或者，如果您关心的是使标记更清晰，您可以在初始化步骤中自动从 JavaScript 添加它们。

小开

使用 jQuery 隐藏第2列的一行代码:

$('td:nth-child(2)').hide();

如果您的表有标题(th) ，请使用以下命令:

$('td:nth-child(2),th:nth-child(2)').hide();

资料来源: 用一行 jQuery 代码隐藏一个表列

测试代码: http://jsfiddle.net/mgMem/1/

如果你想看到一个好的用例，看看我的博客文章:

使用 jQuery 隐藏表列并根据值对行进行着色。

小开

没有课程? 那么你可以使用标签:

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

为了展示它们的用途:

...style.display = 'table-cell';

小开

当然，对于支持 nth-child来说 CSS 的唯一方法是:

table td:nth-child(2) { display: none; }

这是为 IE9和更新的。

对于您的用例，您需要几个类来隐藏列:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

等等。

小开

<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 ." + $(this).attr("name");
$(column).hide();
});


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

小开

这里有一个功能更全面的答案，提供了一些用户交互的基础上，每栏。如果这是一个动态的体验，那么需要在每个列上有一个可点击的切换，指示隐藏列的能力，然后还原以前隐藏的列。

在 JavaScript 中看起来是这样的:

$('.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()


})

为了支持这一点，我们将向表中添加一些标记。在每个列标题中，我们可以添加类似的内容，以提供可点击内容的可视化指示器

<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>

我们将允许用户通过表脚中的链接还原列。如果默认情况下它不是持久的，那么在标题中动态地打开它可能会在表中出现挤压，但是你真的可以把它放在任何你想放的地方:

<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>

这是最基本的功能。这里有一个演示下面与一对夫妇更多的东西充实了。你也可以在按钮上添加一个工具提示来帮助阐明它的用途，将按钮的样式设计得更有组织性一些，将列的宽度折叠起来，以便添加一些(有点不靠谱的) css 动画来使转换不那么跳跃。

JsFiddle和堆栈代码段的工作演示:

$(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'
})


})

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;
}

<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>