我有一个像下面代码的表，我首先想要看不到的子表 但是当用户单击该行时，其他行的子表将关闭 这行下的子表打开。
我怎么能用jQuery做这个？
<table class="mainTable">
<thead>
<tr class="header">
<th style="width:33%">col1</th>
<th style="width:33%">col2</th>
<th style="width:33%">col3</th>
</tr>
</thead>
<tr>
<td class="even" colspan="3">
<table class="childTable"">
<thead>
<tr>
<th style="width:33%">row1</th>
<th style="width:33%">row1</th>
<th style="width:33%">row1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>t1-row1</td>
<td>t1-row1</td>
</tr>
<tr>
<td></td>
<td>t1-row2</td>
<td>t1-row2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="odd" colspan="3">
<table class="childTable" >
<thead>
<tr>
<th style="width:33%">row2</th>
<th style="width:33%">row2</th>
<th style="width:33%">row2</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>t2-row1</td>
<td>t2-row1</td>
</tr>
<tr>
<td></td>
<td>t2-row2</td>
<td>t2-row2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
答案 0 :(得分：1)
不完全确定您要求的是什么，但内置的jQuery Accordion UI可能会帮助您做出要求...它允许您展开和折叠部分。因此，在每个部分中，您可以放一张桌子或更多的手风琴。
答案 1 :(得分：0)
您可以尝试这样的事情：
$('table.mainTable > tr').click(function() {
$(this).siblings().children('table').hide();
$(this).children('table').show();
});
虽然没有关于“开放”和“关闭”的含义的更多信息，但很难想出一些东西。
答案 2 :(得分：0)
我认为你想要点击某些内容（.row-headline）。
.mainTable tr table { display: none; }
---
$('.mainTable tbody>tr .row-headline').click(function({
$(this).parent().siblings().children('table:visible').hide();
$(this).siblings().show();
}));
---
<table class="mainTable">
<thead>...</thead>
<tbody>
<tr>
<td colspan="3">
<h3 class="row-headerline">Row1</h3>
<table>...</table>
</td>
</tr>
...
</tbody>
</table>
答案 3 :(得分：0)
我需要类似的东西，下面是我做的。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function () {
$('tr.tree-toggler').click(function () {
$(this).parent().find('tr').eq(2).find('td.tree').toggle(300);
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr class="tree-toggler nav-header">
<td>
<table border="1" style="width: 100%">
<tbody>
<tr class="tree-toggler nav-header">
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="nav nav-list tree" style="display: none;">
<table class="table" border="1">
<tbody>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr class="tree-toggler nav-header">
<td>
<table border="1" style="width: 100%">
<tbody>
<tr class="tree-toggler nav-header">
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="nav nav-list tree" style="display: none;">
<table class="table" border="1">
<tbody>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
<tr>
<td style="width: 30px;">
Demo
</td>
<td style="width: 200px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
<td style="width: 100px;">
Demo
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>