javascript - HTML根据id显示隐藏(递增)

Question

我有一个表结构，其中始终显示第一个 tr，其余部分隐藏:

<table>
    <tr>
     <td></td>  // No id always show
    </tr>
    <tr id="1">
     <td style="display:none;"></td>  
    </tr>
    <tr id="2">
     <td style="display:none;"></td>  
    </tr>
    <tr id="3">
     <td style="display:none;"></td>  
    </tr>
    <tr id="4">
     <td style="display:none;"></td>  
    </tr>
    <tr id="5">
     <td style="display:none;"></td>  
    </tr>
</table>
<input type="button" id="show" value="show" /></td>
<input type="button" id="hide" value="hide" /></td>     

我想根据那里的 id 显示隐藏的 tr。假设用户点击显示，tr id=2 将显示，用户再次点击显示 tr id=3 将显示。隐藏按钮将隐藏当前显示的最后一个 tr id 是 tr id = 3。

我正在检查这里的一些问题/答案，但目前没有一个符合我的问题:

JQuery hide <tr> based on <td> id

Showing/Hiding Table Rows with Javascript - can do with ID - how to do with Class?

我刚开始做前端，对 javascript 和 jquery 还是个新手，所以非常感谢任何示例或帮助？

Answer 1

你可以像这样使用Jquery

$(document).ready(function(){
  var id_num = 0;                                    // define the id number
  $('#show').on('click',function(){
      id_num++;                                      // add +1 to the id number
      $('#' + id_num).show(); // show tr with that id
  });
  $('#hide').on('click',function(){
      $('tr:not(:nth-child(1)):visible:last').hide(); // hide the last visible tr but not the first one
      id_num = $('tr:visible:last').attr('id') ? $('tr:visible:last').attr('id') : 0;                      // check for tr id when hide if this isn't the first return id number if not return 0
  });
});

tr[id]{
  display : none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
     <td>first</td>  // No id always show
    </tr>
    <tr id="1">
     <td>1</td>  
    </tr>
    <tr id="2">
     <td>2</td>  
    </tr>
    <tr id="3">
     <td>3</td>  
    </tr>
    <tr id="4">
     <td>4</td>  
    </tr>
    <tr id="5">
     <td>5</td>  
    </tr>
</table>
<input type="button" id="show" value="show" /></td>
<input type="button" id="hide" value="hide" /></td>