Question

我有下表

<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();
});

但此刻它不起作用。如果有人能在我的代码中向我显示错误，那将非常有用

Answer 1

您应该使用类选择器.而不是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标记内，因为它位于表格之外，您必须在每个td内添加tr s

希望这有帮助。

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" />

Answer 2

hTab和hTr类不是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>

Answer 3

请查看小提琴link

var currentrow = 0;

    $('.hTab .hTr').hide();
    $('.hTab tr:eq(0)').show();

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

使用javascript逐个显示静态行

3 个答案: