顶部的按钮是我想要使用的按钮。基本上,它们就像价格段,通过按表格应根据所选值重新排列其行。因此,如果选择 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 结尾的单选按钮相对应。
非常感谢任何帮助,因为我完全陷入困境!
最佳答案
好吧,你必须使用 javascript 或 jquery,我将向你展示一个通用解决方案
将 app.js 文件链接到您的 HTML 文件,而不是将数据静态地放入 HTML 中,而是将其放入 js 对象中,如下所示:
users = [
{name:'Jack Bishop', email:'ex@ex.com', MonySpent:'1300'}
...
]
对于页面的初始打开,您可以只注入(inject) HTML,而不对表格进行任何排序,当用户单击任何按钮时,您必须调用一个函数,该函数将 1-清空表 2-按照请求的排列对用户数组进行排序 3-将排序后的用户数组注入(inject)到表中
您可以像这样将 HTML 注入(inject)到表中:
('.sortable tbody').append(
'<tr data-segment-level="5" class="subscribed">' +
'<td>' + users[counter].name + '</td>' +
'<td>' + users[counter].email + '</td>' +
...
'</tr>'
)
关于jquery - 根据列值重新排序表行,而不是升序或降序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62261408/