javascript - 如何使用表格标题的弹出窗口中的按钮对表格进行排序

Question

所以我制作了一个表格，当我单击表格标题时，会弹出一个带有 2 种排序方法和一个过滤器的弹出框，我想知道如何在单击每个按钮时对表格进行排序。过滤器字段应该在桌子。我使用 bootstrap 和 popper 来获取弹出窗口。阻止我正确知道的是我无法获得

弹出窗口：

主表：

<table>
  <thead tabindex="0">
    <tr>
      <th>
        <a tabindex="0" type="button" data-bs-toggle="popover" data-bs-trigger="focus">
          <span>Column 1</span>
        </a>
      </th>
      <th>
        <a tabindex="0" type="button" data-bs-toggle="popover" data-bs-trigger="focus">
          <span>Column 2</span>
        </a>
      </th>
      <th>
        <a tabindex="0" type="button" data-bs-toggle="popover" data-bs-trigger="focus">
          <span>Column 3</span>
        </a>
      </th>
    </tr>
  </thead>
  <tbody tabindex="0">
    <tr>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
    </tr>
    <tr>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
    </tr>
    <tr>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
      <td tabindex="-1">
        <input type="text" autocomplete="off">
      </td>
    </tr>
  </tbody>
</table>

弹出框内的数据：

<table class="UiListColMen">
  <tbody>
    <tr tabindex="0">
      <td>
        <i class="bx bx-filter bx-xs bx-flip-vertical"></i>
        <span>Sort Ascending</span>
      </td>
    </tr>
    <tr tabindex="0">
      <td>
        <i class="bx bx-filter bx-xs"></i>
        <span>Sort Descending</span>
      </td>
    </tr>
    <tr tabindex="0">
      <td>
        <i class="bx bx-filter-alt bx-xs"></i>
        <input autocomplete="off" type="text" style="border: 1px solid">
      </td>
    </tr>
  </tbody>
</table>

此弹出窗口使用引导图标

标签： javascripthtmljquerycssbootstrap-5