Question

我有一个包含固定行数的html表，其中只有第一个从开头可见。单击按钮后，应显示第2行。再次单击相同按钮时，应显示第3行，依此类推。

重要的是，应该在开头加载完整的表（每行包含一个特定的django表单字段），所以我不想在单击按钮时生成额外的html行。我在使用jQuery切换/显示表行时发现了很多东西，但我想在这里做的是每次单击按钮时我想要显示其他行。我的想法是首先启动然后在点击Javascript时增加变量，然后每次显示一个额外的行。我失败了。

我是Javascript的新手，任何建议都非常感谢！

＆＃13;

$(document).ready(function() {
  var counter = 1;
  var $rows = $("#fullTable tr");
  $("RevealRow").click(function() {
    counter++;
    $rows.eq(counter).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="fullTable">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr style="display:none;">
    <td>Row 2</td>
  </tr>
  <tr style="display:none;">
    <td>Row 3</td>
  </tr>
  <tr style="display:none;">
    <td>Row 4</td>
  </tr>
  <tr style="display:none;">
    <td>Row 5</td>
  </tr>
  <tr style="display:none;">
    <td>Row 6</td>
  </tr>
</table>

<button id="RevealRow">Show more rows</button>

＆＃13;

Answer 1

试试这个jQuery代码

$(document).ready(function () {
            $("#RevealRow").click(function () {
                $("#fullTable tr:visible").next().show();
            });
        });

单击按钮后，迭代地显示一个html表格行

1 个答案: