使用 jQuery 显示/隐藏表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15970382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show / hide table columns using jQuery
提问by PSR
I have a table with five columns
我有一张有五列的表格
column1 column2 column3 column4 column5
------- ------- ------- ------- -------
and I have some check boxes each one for one column when the first checkbox is checked then I need to show the first column , if unchecked I need to hide first column. Like that I need to do for all columns.
并且当第一个复选框被选中时，我有一些复选框每个一列然后我需要显示第一列，如果未选中我需要隐藏第一列。就像我需要为所有列做的那样。
I found some answers but I did not find any solution .First time it is hiding then other operations are not working on that.
我找到了一些答案，但我没有找到任何解决方案。第一次它隐藏然后其他操作不起作用。
$('#tableId td:nth-child(column number)').hide();
Please help me .Thanks in advance....
请帮助我。提前致谢....
回答by Chris Dixon
Here you go, full solution:
给你，完整的解决方案：
and updated here: http://jsfiddle.net/vXBtP/5/
并在此处更新：http: //jsfiddle.net/vXBtP/5/
<table>
<thead>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
<td><input type="checkbox" checked="checked" /></td>
</thead>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</tbody>
</table>
$(document).on('change', 'table thead input', function() {
var checked = $(this).is(":checked");
var index = $(this).parent().index();
if(checked) {
$('table tbody tr td').eq(index).show();
} else {
$('table tbody tr td').eq(index).hide();
}
});
回答by David Houde
Depending on the column # you wanna hide, use this stolen one liner:
根据您想要隐藏的列#，使用这个偷来的一个衬垫：
$('td:nth-child(2)').hide();
if you use th
如果你使用
$('td:nth-child(2),th:nth-child(2)').hide();
回答by SpYk3HH
If I got what you mean, you can make it real simple using tr th, tr tdand nth-childselector. You can go based on index, but you'll need to add 1 as nth-childis not 0 indexed like elements in jQuery. And the JS doesn't really have to be drawn out. I should mention, placing trbefore td:nthis very important in that you don't want "only the nth td". if that's the case, you won't hide every col on every row.
如果我明白你的意思，你可以使用tr th, tr td和nth-child选择器让它变得非常简单。您可以根据索引进行操作，但您需要添加 1，因为nth-child它不像 jQuery 中的元素那样被 0 索引。并且 JS 并不是真的必须被抽出来。我应该提到，放置tr在之前td:nth非常重要，因为您不想要“仅第 n 个 td”。如果是这种情况，您将不会隐藏每一行的每个列。
See WORKING jsFIDDLE of YOUR Example
请参阅您的示例的 WORKING jsFIDDLE
FYI: If you want something "cleaner" looking, (like on the turbotax site) donthide the td itself. Instead make it slightly wider than your largest piece of text, and place each piece of text inside por divtags inside each cell. Then change you columnselector to grab each cell's innerelement and hide that instead.
仅供参考：如果你想要看起来“更干净”的东西，（比如在 turbotax 网站上）不要隐藏 td 本身。而是让它比你最大的一段文本稍宽，并将每段文本放在每个单元格内p或div标签内。然后更改column选择器以获取每个单元格的内部元素并将其隐藏。
See Example of this Alternate way here!
在此处查看此替代方法的示例！
HTML
HTML
<table>
<thead>
<tr>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
<th>
<input id="chk1" type="checkbox" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
<tr>
<td>
col1
</td>
<td>
col2
</td>
<td>
col3
</td>
</tr>
</tbody>
</table>
<button>Reset</button>
JavaScript
JavaScript
$(function() {
// Selects your table by id, then the input checkboxes inside the table, you can
// alternate this call with classnames on your inputs if you're going to have
// more inputs than what's desired in call here.
// also note i'm using the "change" function and not "click", this simply
// provides easier control of what's going on with your inputs and makes
// later calls (like reset) a much easier call. Less thinking required
$("#tableId input[type=checkbox]").on("change", function(e) {
// First variable grabs the inputs PARENT index, this is the TH containing
// the input, thus the column you want hidden.
// The second is calling ALL TH's && TD's having that same index number
var id = $(this).parent().index()+1,
col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
// This simple inline "if" statement checks if the input is checked or now
// and shows the columns based on if it IS checked
$(this).is(":checked") ? col.show() : col.hide();
}).prop("checked", true).change(); // here i set all inputs to checked without having to write it in the above HTML
$("button").on("click", function(e) {
$("input[type=checkbox]").prop("checked", true).change();
});
})
回答by PranitG
You can get the header index of table and make the table header and td elements hidden. Something like this
Suppose the index of table header is index = 2;
您可以获取表格的标题索引并隐藏表格标题和 td 元素。像这样
假设表头的索引是 index = 2;
var index= tableHeaderIndex; // 2 here
$('th:nth-child('+index+')').hide();
$('td:nth-child('+index+')').hide();
回答by Dan Twining
Like this?
像这样？
Lashed together quickly but should work.
快速捆绑在一起，但应该工作。
<table id="TabToHide">
<tr>
<td class="Col1">Col 1</td>
<td class="Col2">Col 2</td>
<td class="Col3">Col 3</td>
<td class="Col4">Col 4</td>
<td class="Col5">Col 5</td>
</tr>
<tr>
<td class="Col1">Stuff 1</td>
<td class="Col2">Stuff 2</td>
<td class="Col3">Stuff 3</td>
<td class="Col4">Stuff 4</td>
<td class="Col5">Stuff 5</td>
</tr>
</table>
<br />
<table>
<tr>
<td><input name="Col1" type="checkbox" checked="checked" /></td>
<td><input name="Col2" type="checkbox" checked="checked" /></td>
<td><input name="Col3" type="checkbox" checked="checked" /></td>
<td><input name="Col4" type="checkbox" checked="checked" /></td>
<td><input name="Col5" type="checkbox" checked="checked" /></td>
</tr>
</table>
Javascript
Javascript
$('input:checkbox').change(function(){
var ColToHide = $(this).attr("name");
if(this.checked){
$("td[class='" + ColToHide + "']").show();
}else{
$("td[class='" + ColToHide + "']").hide();
}
$('div#Debug').text("hiding " + ColToHide);
});
回答by rahularyansharma
$(document).ready(function(){
$('table tr input:checkbox').change(function(){
var num = $(this).parents("th").index();
alert(num);
if($(this).is(":checked"))
{
$('table tbody tr td').eq(num).show();
}else
{
$('table tbody tr td').eq(num).hide();
}
});
});
回答by MatHatrik
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show and Hide Columns in a Table</title>
<link href="CSS/table.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.1.min.js"></script>
<script>
$(function () {
var $chk = $("#grpChkBox input:checkbox");
var $tbl = $("#someTable");
$chk.prop('checked', true);
$chk.click(function () {
var colToHide = $tbl.find("." + $(this).attr("name"));
$(colToHide).toggle();
});
});
</script>
</head>
<body>
<h2>Show and Hide Columns in a Table</h2>
<p>Click on each Checkbox to hide corresponding Column</p>
<div id="grpChkBox">
<p><input type="checkbox" name="empid" /> Employee ID</p>
<p><input type="checkbox" name="fname" /> First Name</p>
<p><input type="checkbox" name="lname" /> Last Name</p>
<p><input type="checkbox" name="email" /> Email</p>
<p><input type="checkbox" name="phone" /> Phone</p>
</div>
<table id="someTable">
<thead>
<tr>
<th class="empid">EmpId</th>
<th class="fname">First Name</th>
<th class="lname">Last Name</th>
<th class="email">Email</th>
<th class="phone">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td class="empid">E342</td>
<td class="fname">Bill</td>
<td class="lname">Evans</td>
<td class="email">[email protected]</td>
<td class="phone">234-2345-2345</td>
</tr>
<tr>
<td class="empid">E343</td>
<td class="fname">Laura</td>
<td class="lname">Matt</td>
<td class="email">[email protected]</td>
<td class="phone">123-1234-5678</td>
</tr>
<tr>
<td class="empid">E344</td>
<td class="fname">Ram</td>
<td class="lname">Kumar</td>
<td class="email">[email protected]</td>
<td class="phone">345-3456-7890</td>
</tr>
</tbody>
</table>
</body>
</html>
