没问题，咱们可以通过添加一个计数器来跟踪当前要显示的行，每次点击按钮就依次展示下一行，直到全部显示完毕。先给你修正后的完整代码，再拆解下关键修改点：

修正后的完整代码 #

HTML部分

<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>
    <!-- 用Bootstrap的d-none类实现初始隐藏，和你的原有隐藏逻辑兼容 -->
    <tr class="row5 d-none" id="row5">
      <th data-field="#">5</th>
      <td class="An5">Announcement 5</td>
    </tr>
    <tr class="row6 d-none" id="row6">
      <th data-field="#">6</th>
      <td class="An6">Announcement 6</td>
    </tr>
    <tr class="row7 d-none" 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>

JavaScript部分

$(function () {
  // 把需要依次显示的行ID存进数组，方便后续扩展
  const hiddenRows = ['row5', 'row6', 'row7'];
  // 计数器：记录当前要显示的行的索引，从0开始
  let currentIndex = 0;

  $("#crtbtn").on('click', function () {
    // 检查是否还有未显示的行
    if (currentIndex < hiddenRows.length) {
      // 显示当前索引对应的行
      $("#" + hiddenRows[currentIndex]).show();
      // 计数器+1，下次点击就显示下一行
      currentIndex++;
    } else {
      // 所有行都显示完后的交互，可选操作
      alert("所有公告都已展示完毕！");
      // 也可以直接禁用按钮，防止重复点击
      // $(this).prop('disabled', true);
    }
  });
});

关键修改说明 #

1. HTML语法修正：补全了你原代码里缺失的引号和标签闭合，保证HTML结构合法；同时用Bootstrap自带的d-none类实现初始隐藏（如果你的原代码是用自定义CSS隐藏的，替换成你原来的类即可）。
2. 逻辑优化：
   • 用数组存储需要显示的行ID，后续如果新增隐藏行，只需要往数组里加ID就行，不用改逻辑。
   • 用计数器跟踪当前显示进度，每次点击后自动切换到下一行，避免重复写多个判断。
   • 加入了边界判断，当所有行都显示完后，给出提示或禁用按钮，提升用户体验。

内容的提问来源于stack exchange，提问作者Dark Apostle