Javascript 隐藏和/或显示表格列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10458781/
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
Hide and/or Show Table Columns
提问by Shane Hicks
I need a table that can display only certain columns depending on whether a check box is selected or not. If selected, I want all columns to show. If not selected, I need it to show only the "weekly" class columns. I want to use as little JavaScript (if any) as possible and needs to be cross-browser compatible.
我需要一个只能显示某些列的表格，具体取决于是否选中了复选框。如果选中，我希望显示所有列。如果未选中，我需要它仅显示“每周”课程列。我想尽可能少地使用 JavaScript（如果有的话）并且需要跨浏览器兼容。
<table>
<tr class="weekly">
<td></td>
</tr>
<tr class="overall">
<td></td>
</tr>
</table>
<input type="checkbox" name="data" value="Show Overall Data" />
Simply put, I need a table that will hide and show certain columns depending on what the check box status is.
简而言之，我需要一个表格来隐藏和显示某些列，具体取决于复选框的状态。
Also, I am not good with coding so I would need someone to paste the entire code including HTML tags and what not.
另外，我不擅长编码，所以我需要有人粘贴整个代码，包括 HTML 标签等等。
回答by Jhilom
Javascript
Javascript
function check()
{
if(document.getElementById("weekly").style.display == "none")
document.getElementById("weekly").style.display = "block";
else
document.getElementById("weekly").style.display = "none";
if(document.getElementById("overall").style.display == "block")
document.getElementById("overall").style.display = "none";
else
document.getElementById("overall").style.display = "block";
}
And HTML
和 HTML
<table>
<tr class="weekly" id="weekly" style="display:none">
<td>ABBB</td>
</tr>
<tr class="overall" id="overall" style="display:none">
<td>BCC</td>
</tr>
</table>
<input type="checkbox" name="data" value="Show Overall Data" onclick="check()"/>
回答by sha256
EDITED: Full html here. using jquery
编辑：完整的 html 在这里。使用jQuery
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function(){
if ($("input:checkbox").is(":not(:checked)")){
$('tr').hide();
$('tr.weekly').show();
}
});
</script>
</head>
<body>
<input type="checkbox" name="data"/>
<table>
<tr class="weekly">
<td>WEEEKLY</td>
</tr>
<tr class="overall">
<td>OVERLLL</td>
</tr>
</table>
</body>
</html>
回答by user1376261
use jquery
使用jQuery
$(document).ready(function () {
$('.overall').hide();
});
$("#data").is(':checked')
? $(".overall").show()
: $(".overall").hide();
change name = "data" to Id = "data"
将 name = "data" 更改为 Id = "data"
回答by mg1075
Building upon the example @anu pointed to in an earlier stackoverflow answer, here's a live example in jsbin.
以@anu 在早期 stackoverflow 答案中指出的示例为基础，这是 jsbin 中的一个实时示例。
http://jsbin.com/ehodul/4/edit#javascript,html,live
http://jsbin.com/ehodul/4/edit#javascript,html,live
Below is (most) of the code, but again, I would encourage you to tinker with the example on jsbin.
下面是（大部分）代码，但同样，我鼓励您修改 jsbin 上的示例。
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="jquery.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
table { padding: 0; border-collapse: collapse; }
table th { background-color: #eee; }
table td, th { border: 1px solid #d7d7d7; padding: 7px; }
</style>
</head>
<body>
<select id="myOptions">
<option value="1">hide col 1</option>
<option value="2">hide col 2</option>
<option value="3">hide col 3</option>
<option value="4">hide col 4</option>
</select>
<p> </p>
<table id="myTable" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1abcdefg</td>
<td>2abcdefg</td>
<td>3abcdefg</td>
<td>4abcdefg</td>
</tr>
<tr>
<td>1abcdefg</td>
<td>2abcdefg</td>
<td>3abcdefg</td>
<td>4abcdefg</td>
</tr>
<tr>
<td>1abcdefg</td>
<td>2abcdefg</td>
<td>3abcdefg</td>
<td>4abcdefg</td>
</tr>
<tr>
<td>1abcdefg</td>
<td>2abcdefg</td>
<td>3abcdefg</td>
<td>4abcdefg</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function hideColumn(columnIndex) {
$('#myTable thead th, #mytable tbody td').show();
$('#mytable thead th:nth-child('+(columnIndex)+'), #mytable tbody td:nth-child('+(columnIndex)+')').hide();
}
$("#myOptions").change(function() {
selectedVal = $(this).val();
console.log(selectedVal);
hideColumn( selectedVal );
});
</script>
</body>
</html>
