使用 javascript 逐个显示静态行

Show static rows one by one using javascript

本文关键字：静态 显示 javascript 使用      更新时间：2023-09-26

我有下表 

<table class="hTab">
     <tr class="hTr"> </tr>
     <tr class="hTr"> </tr>
     <tr class="hTr"> </tr>
</table>
<tr> <input type=button value="Show 1 more" id="onemore" /></tr>

我使用以下jQuery代码逐行显示（我在表中声明了10行） 

var currentrow = 0;
$('#hTab #hTr').hide();
$('#hTab #tr:eq(0)').show();
$("#onemore").click(function () {
    currentrow++;
    $('#hTab #hTr:eq(' + currentrow + ')').show();
});

但目前它不起作用。如果有人可以向我展示代码中的错误，那将非常有帮助

你应该

使用类选择器.而不是id选择器#，例如：

$('.hTab .hTr:eq(' + currentrow + ')').show();

所以代码将是：

var currentrow = 0;
$('.hTab .hTr').hide();
$('.hTab tr:eq(0)').show();
$("#onemore").click(function () {
    currentrow++;
    $('.hTab .hTr:eq(' + currentrow + ')').show();
});

注意：按钮不应该在标签内tr因为它在表外，你必须在每个tr内添加td。

希望这有帮助。

var currentrow=0;
$('.hTab .hTr').hide();
$('.hTab tr:eq(0)').show();
$("#onemore").click(function () {
  currentrow++;
  $('.hTab .hTr:eq(' + currentrow + ')').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="hTab">
  <tr class="hTr"><td> A </td></tr>
  <tr class="hTr"><td> B </td></tr>
  <tr class="hTr"><td> C </td></tr>
</table>
<input type=button value="Show 1 more" id="onemore" />

hTab 和 hTr 是 class 不是 id：

所以在任何地方使用：

$('.hTab .hTr')


    var currentrow = 0;
    $('.hTab .hTr').hide();
    $('.hTab .hTr:eq(0)').show();
    $("#onemore").click(function () {
        currentrow++;
        $('.hTab .hTr:eq(' + currentrow + ')').show();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="hTab">
     <tr class="hTr"> <td>A<td> </tr>
     <tr class="hTr"> <td>B<td> </tr>
     <tr class="hTr"> <td>C<td> </tr>
</table>
<tr> <input type=button value="Show 1 more" id="onemore" /></tr>

请参阅小提琴链接

var currentrow = 0;
    $('.hTab .hTr').hide();
    $('.hTab tr:eq(0)').show();
    $("#onemore").click(function () {
        currentrow++;
        $('.hTab .hTr:eq(' + currentrow + ')').show();
    });
相关文章：