你可以使用一些相当通用的东西来切换 tbody 元素。根据需要调整以下内容,它不需要任何 ID。
我已将行分组以在 tbody 元素中显示和隐藏,以便于处理它们。
<script>
var toggleRows = (function() {
var hidden = -1;
return function(el) {
var tbodies;
// Get the table from the passed element
// The element must be in the table, or be the table
while (el.tagName.toLowerCase() != 'table') {
el = el.parentNode;
}
// Get just tbody elements, exclude thead and tfoot
tbodies = el.tBodies;
// Hide them all
for (var i=0, iLen=tbodies.length; i<iLen; i++) {
tbodies[i].style.display = 'none';
}
// Show the next tbody, or first if were showing the last one
tbodies[++hidden % iLen].style.display = '';
}
}());
window.onload = function() {
toggleRows(document.getElementById('section1'));
}
</script>
<table>
<thead>
<tr>
<th colspan="3"><span onclick="toggleRows(this);">Show next</span></th>
</tr>
</thead>
<tbody id="section1">
<tr>
<td>foo 1<td>bar 1<td>fum 1
<tbody id="section2">
<tr>
<td>foo 2<td>bar 2<td>fum 2
<tbody id="section3">
<tr>
<td>foo 3<td>bar 3<td>fum 3
</table>