我有一个 10 行的 html 表。我想显示表格的前 5 行 5 秒,接下来的 5 行再显示 5 秒。当显示一组行时,应隐藏另一组。
请帮助
感谢和问候,
abk
我有一个 10 行的 html 表。我想显示表格的前 5 行 5 秒,接下来的 5 行再显示 5 秒。当显示一组行时,应隐藏另一组。
请帮助
感谢和问候,
abk
这是在第一行和最后五行之间连续循环的粗略且现成的方法:
$(document).ready(function() {
var $rows = $("table tr"),
i = 0;
function cycle() {
$rows.hide();
$rows.slice(i, i + 5).show();
i = (i + 5) % $rows.length;
setTimeout(cycle, 5000);
}
cycle();
});
您需要将表格分成两部分(div),然后使用 setTimeout() 和 JQuery 的 toggle() 来切换这些部分。试一试!
好的,根据我对您的要求的理解,我已经对此进行了编码。请检查这是你想要的。!
<table width="100">
<tr class="first-five-tr">
<td>first</td>
</tr>
<tr class="first-five-tr">
<td>first</td>
</tr>
<tr class="first-five-tr">
<td>first</td>
</tr>
<tr class="first-five-tr">
<td>first</td>
</tr>
<tr class="first-five-tr">
<td>first</td>
</tr>
<tr class="second-five-tr">
<td>second</td>
</tr>
<tr class="second-five-tr">
<td>second</td>
</tr>
<tr class="second-five-tr">
<td>second</td>
</tr>
<tr class="second-five-tr">
<td>second</td>
</tr>
<tr class="second-five-tr">
<td>second</td>
</tr>
</table>
<script>
var hideFirstfive = null;
function hideSecondFive() {
$('.second-five-tr').hide();
$('.first-five-tr').show();
clearInterval(hideSecondfive);
hideFirstfive = setInterval(hideFirstFive, 5000);
}
function hideFirstFive() {
$('.first-five-tr').hide();
$('.second-five-tr').show();
clearInterval(hideFirstfive);
hideSecondfive = setInterval(hideSecondFive, 5000);
}
var hideSecondfive = setInterval(hideSecondFive, 5000);
</script>