html之table之多个tbody
效果图：
代码：
代码二：
引用：
http://stackoverflow.com/a/3076721/2893073
http://www.w3.org/TR/xhtml1/dtds.html
--
代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
table, td, th {
border: 1px solid black;
border-top:none;
}
th{
border-top: 1px solid black;
}
th,td{
width: 100px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table {
border-collapse: collapse;
}
th {
text-align: left;
}
.expand{
display:block;
border:1px solid black;
position:relative;
float:right;
margin-right:-53px;
background-color:#f2f2ff;
width:50px;
height:100%;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
cursor:pointer;
color:#456;
}
.expand:hover{
color:#888;
}
.tHide{
display:none;
}
h2>i{
color:brown;
}
</style>
</head>
<body>
<h2>The <i>tbody</i> Tag</h2>
<p>Use <b><i>multiple</i></b> tbody sections when rules are needed between groups of table rows:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
</table>
<table>
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100
<span class="expand">Detail</span>
</td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150<span class="expand">Detail</span></td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300<span class="expand">Detail</span></td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250<span class="expand">Detail</span></td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tbody span.expand").click(function(){
var tbody =
$(this)
.parent() // td
.parent() // tr
.parent() // tbody
.siblings('tbody');
tbody
//.slideToggle("slow");
//.toggleClass("tHide");
.fadeToggle("fast","swing");
});
});
</script>
</body>
</html>
代码二：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
table, td, th {
border: 1px solid black;
border-top:none;
}
th{
border-top: 1px solid black;
}
th,td{
width: 100px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table {
border-collapse: collapse;
}
th {
text-align: left;
}
.expand{
display:block;
border:1px solid black;
position:relative;
float:right;
margin-right:-53px;
background-color:#f2f2ff;
width:50px;
height:100%;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
cursor:pointer;
color:#456;
}
.expand:hover{
color:#888;
}
.tHide{
display:none;
}
h2>i{
color:brown;
}
</style>
</head>
<body>
<h2>The <i>tbody</i> Tag</h2>
<p>Use <b><i>multiple</i></b> tbody sections when rules are needed between groups of table rows:</p>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
</thead>
<!-- 1. tbody -->
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100
<span class="expand">Detail</span>
</td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
<!-- 2. tbody -->
<tbody>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150<span class="expand">Detail</span></td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
<!-- 3. tbody -->
<tbody>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300<span class="expand">Detail</span></td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
<!-- 4. tbody -->
<tbody>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250<span class="expand">Detail</span></td>
</tr>
</tbody>
<tbody class="tHide">
<tr>
<td>1.0</td>
<td>2.0</td>
<td>3.0</td>
</tr>
<tr>
<td>2.0</td>
<td>3.0</td>
<td>4.0</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tbody span.expand").click(function(){
var tbody =
$(this)
.parent() // td
.parent() // tr
.parent() // tbody
.next();
tbody
//.slideToggle("slow");
//.toggleClass("tHide");
.fadeToggle("fast","swing");
});
});
</script>
</body>
</html>
引用：
http://stackoverflow.com/a/3076721/2893073
http://www.w3.org/TR/xhtml1/dtds.html
--