根据不升序或降序的列值对表行重新排序

Question

所以，我在前端有一张桌子，看起来像这样

顶部的按钮是我正在尝试制作的。基本上它们就像价格段，通过按下表格应该根据所选值重新排列它的行。因此，如果选择 1500 - 2000，则该段中的每个用户都应该在表中排在第一位。

下面是我的html 标记。

<form action="" id="segments">
    <input type="radio" id="0-level" name="level" value="менее €500">
    <label for="0-level">less than €500</label>

    <input type="radio" id="1-level" name="level" value="€500 - €1000">
    <label for="1-level">€500 - €1000</label>

    <input type="radio" id="2-level" name="level" value="€1000 - €1500">
    <label for="2-level">€1000 - €1500</label>

    <input type="radio" id="3-level" name="level" value="€1500 - €2000">
    <label for="3-level">€1500 - €2000</label>

    <input type="radio" id="4-level" name="level" value="€2000 - €2500">
    <label for="4-level">€2000 - €2500</label>

    <input type="radio" id="5-level" name="level" value="более €2500">
    <label for="5-level">more than €2500</label>

  </form>
<table class="sortable">
    <thead>
        <tr><th>Name</th>
        <th>Email</th>
        <th>Money spend</th>
        <th>Last login</th>
        <th>Send Newsletter</th>
    </tr>
  </thead>
    <tbody>
      <tr data-segment-level="2" class="subscribed">
        <td>jack bishop</td><td>abc@site.com</td>
        <td>€1,189.38</td><td>08/06/2020   </td>
        <td>
          <input type="checkbox" class="emailstosend" name="emailstosend" value="abc@site.com">
        </td>
       </tr>
       <tr data-segment-level="5" class="subscribed">
         <td>Jack Mimo</td>
         <td>email@site.com</td>
         <td>€15,345.78</td>
         <td>05/06/2020   </td>
         <td>
           <input type="checkbox" class="emailstosend" name="emailstosend" value="email@site.com">
         </td>
       </tr>
    </tbody>
</table>

我已将data-segmnent-level 属性添加到每一行，其值取决于该行/用户花费的金钱。它们与顶部的单选按钮相对应，以 0 开头，以 5 结尾。

非常感谢任何帮助，因为我完全陷入困境！

Answer 1

好的，你必须使用javascript或jquery，我会告诉你一个通用的解决方案

将 app.js 文件链接到您的 HTML 文件，而不是将您的数据静态地放入 HTML 中，而是将其放入 js 对象中，如下所示：

users = [
    {name:'Jack Bishop', email:'ex@ex.com', MonySpent:'1300'}
    ...
]

对于页面的初始打开，您可以只注入 HTML 而不对您的表格进行任何排序，并且当用户单击任何按钮时，您必须调用一个函数，该函数将 1-清空表 2-排序用户数组与请求的排列 3- 将排序后的用户数组注入表

您可以像这样将 HTML 注入表格：

('.sortable tbody').append(
     '<tr data-segment-level="5" class="subscribed">' +
     '<td>' + users[counter].name + '</td>' +
     '<td>' + users[counter].email + '</td>' +
     ...
     '</tr>'  
)