<!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>
当我单击tr时它将隐藏。单击按钮时我需要显示所有隐藏的tr。并且我还编写了用于隐藏列的代码。但是当我隐藏第4列的第3列内容并占据第3列时使第4列一个空的。任何人都可以正确地引导我。预先感谢。
<button id="display" onclick="change()">Show all</button>
你忘了()。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句