如何连续单击按钮以显示 javascript 中的下一个元素

Question

I currently have a bootstrap table with 3 hidden rows. I have a button that I want to click to show the row. I have this working but I want to add functionality so that when i click that button again the next row shows and click it one more time and the third hidden row shows. Is it possible to do this based off this function?

 <table id = "mt" class="tableManager-table-bordered"   
  <thead class = "thead-dark">
    <tr>
      <th data-field="#">#</th>
      <th data-field="CurrentAnnouncements">Current Announcements</th>
    </tr>
    </thead>
<tbody>
    <tr class = "row5" id = "row5">
      <th data-field="#">5</th>
      <td class = "An5">Announcement 5</td>

    </tr>
    <tr class = "row6 id ="row6">
      <th data-field="#">6</th>
      <td class = "An6">Announcement 6</td>
    </tr>
    <tr class = "row7" id ="row7">
      <th data-field="#">7</th>
      <td class = "An7">Announcement 7</td>
    </tr>
  </tbody>
</table>


<button  type = "button" id = "crtbtn" class = "CreateAnnouncement">
Create Announcement
</button>

$(function () {
        $("#crtbtn").on('click', function () {
            $("#row5").show();

        });
    });

Answer 1

Something like this would do the job:

 $(function () { const alltrs=$("#container tr").hide(); $("#crtbtn" ).click(ev=>alltrs.filter(':hidden:first').show()); $('#hideall').click(ev=>alltrs.hide()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="crtbtn">show more</button> <button id="hideall">hide all again</button> <table id="container"> <tr class = "r5" id = "r5"> <th data-field="#">5</th> <td class = "An5">Announcement 5</td> </tr> <tr class = "r6"> <th data-field="#">6</th> <td class = "An6">Announcement 6</td> </tr> <tr class = "r7"> <th data-field="#">7</th> <td class = "An7">Announcement 7</td> </tr> </table>

You can do the same thing also without jQuery. Admittedly, a little more verbose, but it is still fairly short and clear:

 const alltrs=[...document.querySelectorAll("#container tr")], hideall=ev=>alltrs.forEach(t=>t.style.display="none"); hideall(); document.getElementById("crtbtn" ).onclick=ev=>{ alltrs.some(t=>t.style.display=='none'? .(t.style:display=""). false) } document.getElementById('hideall');onclick=hideall;

 <button id="crtbtn">show more</button> <button id="hideall">hide all again</button> <table id="container"> <tr class = "r5" id = "r5"> <th data-field="#">5</th> <td class = "An5">Announcement 5</td> </tr> <tr class = "r6"> <th data-field="#">6</th> <td class = "An6">Announcement 6</td> </tr> <tr class = "r7"> <th data-field="#">7</th> <td class = "An7">Announcement 7</td> </tr> </table>

alltrs.some(t=>t.style.display=='none'? .(t.style:display="") : false) } goes through all <tr> s until it finds one that has t.style.display=="none" . In that case it sets the same property to a blank ( "" ) and returns true ( = !"" ) thereby ending the .some() loop.

Answer 2

You can just show the next element after the last shown element -

 $(document).ready(function() { $('#table').find('tr').slice(1).hide(); $('#button').on('click', function() { $('#table').find('tr:visible').next().show(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="table"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> <button id="button"> Show </button>