我可以根据数组中的计数对表中显示的数据进行html排序吗

Question

例如，我有一个这样显示的表。

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}

<h2>HTML Table</h2>
<table>
<tr>
<th>ID</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>6</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>5</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>3</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>1</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>2</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

所以这些数据不会保存在我的数据库中，但我已经保存了它们的实际计数，所以无论何时我要编辑它们，它们都会在我的视野中隆隆作响，我的目标是首先根据它们的计数排列它们。

var count = [1,2,3,4,5,6];

对于这个数组，假设这就是它们的排列。我的问题是，通过使用ID列，如何或是否可能根据我的计数变量排列它们？

Answer 1

是的，有可能：

const sort = (rows, sort) => sort.map(e => rows.find(({ id }) => id == e))
const getRowId = (row) => +jQuery(jQuery(row).find('td')[0]).text() // 0 is the first column
const getSortObj = (row) => ({ id: getRowId(row), row })
const setDirectionText = (directionSpan) => (direction) => directionSpan.text(direction)
jQuery(document).ready(function($) {
let sortByArr = [1, 2, 3, 4, 5, 6]
let direction = "ASC"
const directionSpan = setDirectionText($("#direction"))
directionSpan(direction)
$('#btn-sort').on('click', function() {
const $rows = $('#table tbody tr')
const sortedRows = sort($.map($rows, getSortObj), sortByArr).map(({ row }) => row)
$('#table tbody').html(sortedRows)

sortByArr = sortByArr.reverse()
direction = direction === "ASC" ? "DESC" : "ASC"
directionSpan(direction)
})
})

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>HTML Table</h2>
<button id="btn-sort">SORT TABLE <span id="direction"></span></button>
<br />
<br />
<table id="table">
<thead>
<tr>
<th>ID</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>5</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>4</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>3</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>1</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>2</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>

这个片段比你要求的要多：它可以按升序和降序排序——每次排序后都会切换。