如何显示所有使用jQuery隐藏的元素？
[英]How to show all the elements that are in hidden using jQuery?
问题描述
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Toggle</title>
<style>
table, td, th {
border: 2px solid black;
border-collapse:collapse;
height:50px;
}
td {width:200px;
}
body {
padding: 50px;
}
</style>
<script>
var ind;
$(document).ready(function () {
$("#table tr").click(function () {
if ($(this).index() > 0)
$(this).hide();
});
$("#table th").click(function () {
var ind = $(this).index();
$("td:nth-child("+(ind+1)+")").toggle();
});
});
function change() {
$("tr").show();
}
</script>
</head>
<body>
<button id="display" onclick="change">Show all</button>
<table id="table">
<tr>
<th>
Company
</th>
<th>
Name
</th>
<th>
Color
</th>
<th>
type
</th>
</tr>
<tr>
<td>Audi</td>
<td>Q6</td>
<td>Metalic grey</td>
<td>SUV</td>
</tr>
<tr>
<td>Jaguar</td>
<td>A8</td>
<td>Black</td>
<td>Sedan</td>
</tr>
<tr>
<td>Ambassador</td>
<td>Classic</td>
<td>White</td>
<td>Sedan</td>
</tr>
<tr>
<td>Mahindra</td>
<td>Scorpio</td>
<td>White</td>
<td>SUV</td>
</tr>
</table>
</body>
</html>
When i click the tr it will hide.I need to show all the hidden tr when i click the button.And i also written code for hiding a column.But when i hide 3rd column contents of 4th column occupying the 3rd column making the 4th one empty.Can anyone direct me correctly.Thanks in advance. 
当我单击tr时它将隐藏。单击按钮时我需要显示所有隐藏的tr。并且我还编写了用于隐藏列的代码。但是当我隐藏第4列的第3列内容并占据第3列时使第4列一个空的。任何人都可以正确定向我。在此先感谢。
2 个解决方案
解决方案1
0 已采纳 2014-12-22 06:57:03
<button id="display" onclick="change()">Show all</button>
您忘记了() 。
解决方案2
0 2014-12-22 11:02:30
$(document).ready(function () { $（document）.ready（function（）{
$("#table tr").click(function () {
if ($(this).index() > 0)
$(this).hide();
});
$("#table th").click(function () {
var ind = $(this).index();
$(this).toggle();
$("td:nth-child("+(ind+1)+")").toggle();
});
});
Please add the code $(tihs).toggle() as shown in above.As you only write code to hide the tds not th. 如上所示，请添加代码$（tihs）.toggle（），因为您只编写代码来隐藏tds而不是。 If you want to show that columns again in your button click please add this to your change function. 如果要再次在按钮中显示该列，请将该列添加到更改功能中。
$("th").show(); $（“ th”）。show（）; $("td").show(); $（“ td”）。show（）;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.