使用选项卡对表格进行排序（&A）；Javascript
我希望有人能帮我。我已经创建了一个表，并且有多个选项卡。每个选项卡在表中都有不同的数据。每个表行都有一个包含大量投票的列，我想用顶部投票较多的列自动对这些行进行排序 这是我的HTML代码：使用选项卡对表格进行排序（&A）；Javascript,javascript,sorting,html-table,bootstrap-5,Javascript,Sorting,Html Table,Bootstrap 5,我希望有人能帮我。我已经创建了一个表，并且有多个选项卡。每个选项卡在表中都有不同的数据。每个表行都有一个包含大量投票的列，我想用顶部投票较多的列自动对这些行进行排序 这是我的HTML代码： <div class="row" style="text-align: center;"> <div class="container" style="margin-top: 8%;"&g
<div class="row" style="text-align: center;">
<div class="container" style="margin-top: 8%;">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-comedy-tab" data-bs-toggle="pill" data-bs-target="#pills-comedy" type="button" role="tab" aria-controls="pills-comedy" aria-selected="false">COMEDY MOVIES</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-horror-tab" data-bs-toggle="pill" data-bs-target="#pills-horror" type="button" role="tab" aria-controls="pills-horror" aria-selected="false">HORROR MOVIES</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!--START OF COMEDY MOVIES TAB-->
<div class="tab-pane fade show active" id="pills-comedy" role="tabpanel" aria-labelledby="pills-comedy-tab">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Director</th>
<th scope="col" class="d-none d-md-table-cell">Starring</th>
<th scope="col">Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hot Rod</td>
<td>Akiva Schafer</td>
<td class="d-none d-md-table-cell">Andy Samberg</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Game Night</td>
<td>Jonathon Goldstein</td>
<td class="d-none d-md-table-cell">Jason Bateman</td>
<td><span class="vote">99</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>The First Wives Club</td>
<td>Hugh Wilson</td>
<td class="d-none d-md-table-cell">Keenan Wayans</td>
<td><span class="vote">21</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Scary Movie</td>
<td>Keenan Wayans</td>
<td class="d-none d-md-table-cell">Marlon Wayons</td>
<td><span class="vote">1</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>Blockers</td>
<td>Kay Cannon</td>
<td class="d-none d-md-table-cell">Leslie Mann</td>
<td><span class="vote">11</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>The Bank Dick</td>
<td>Eddie Cline</td>
<td class="d-none d-md-table-cell">W.C Fields</td>
<td><span class="vote">87</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>Mrs Doubtfire</td>
<td>Chris Columbus</td>
<td class="d-none d-md-table-cell">Robin Williams</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
</tbody>
</table>
</div>
<!--END OF COMEDY MOVIES TAB-->
<!--START OF HORROR MOVIES TAB-->
<div class="tab-pane fade" id="pills-horror" role="tabpanel" aria-labelledby="pills-horror-tab">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Director</th>
<th scope="col" class="d-none d-md-table-cell">Starring</th>
<th scope="col">Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Acacia</td>
<td>Park Ki-Young</td>
<td class="d-none d-md-table-cell">$50,000,000</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Dead End</td>
<td>Fabrise Canepa</td>
<td class="d-none d-md-table-cell">Ray Wise</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Malefic</td>
<td>Steve Sessions</td>
<td class="d-none d-md-table-cell">Cynder moon</td>
<td><span class="vote">99</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Love Object</td>
<td>Robert Parigi</td>
<td class="d-none d-md-table-cell">Udo Kier</td>
<td><span class="vote">125</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jeepers Creepers II</td>
<td>Victor Salva</td>
<td class="d-none d-md-table-cell">Jonathan Breck</td>
<td><span class="vote">3368</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>Into The Mirror</td>
<td>Kim Sung-Ho</td>
<td class="d-none d-md-table-cell">Yoo Ji-Tae</td>
<td><span class="vote">380</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>Threshold</td>
<td>Chuck Bowman</td>
<td class="d-none d-md-table-cell">Nicholas lea</td>
<td><span class="vote">32</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
</tbody>
</table>
</div>
<!--END OF HORROR MOVIES TAB-->
</div>
</div>
</div>
</div>
谢谢大家，每个选项卡（喜剧和恐怖）都有单独的数组，这对我很有用，所以您只需创建第二个数组并使用更具体的JS选择器复制javascript函数
var dataRows1 = []
var dataRows2 = []
function sortRows() {
//Create an array of all rows with its value (this assumes that the amount is always a number. You should add error checking!! Also assumes that all rows are data rows, and that there are no header rows. Adjust selector appropriately.
$('#pills-comedy tr').each(function () {
dataRows1.push({
'vote': parseFloat($(this).find('.vote').text()),
'row': $(this)
});
})
$('#pills-horror tr').each(function () {
dataRows2.push({
'vote': parseFloat($(this).find('.vote').text()),
'row': $(this)
});
})
//Sort the data smallest to largest
dataRows1.sort(function (a, b) {
return b.vote - a.vote;
});
dataRows2.sort(function (a, b) {
return b.vote - a.vote;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
$('#pills-comedy table').empty();
$('#pills-horror table').empty();
//Add rows back to table in the correct order.
dataRows1.forEach(function (ele) {
$('#pills-comedy table').append(ele.row);
})
dataRows2.forEach(function (ele) {
$('#pills-horror table').append(ele.row);
})
};
这是你想要的，但至少在这里它仍然打破了一些引导布局，我不知道为什么，现在需要深入研究一下。嘿，伙计，谢谢你的回复。这工作做得很好。非常感谢你的帮助
var dataRows1 = []
var dataRows2 = []
function sortRows() {
//Create an array of all rows with its value (this assumes that the amount is always a number. You should add error checking!! Also assumes that all rows are data rows, and that there are no header rows. Adjust selector appropriately.
$('#pills-comedy tr').each(function () {
dataRows1.push({
'vote': parseFloat($(this).find('.vote').text()),
'row': $(this)
});
})
$('#pills-horror tr').each(function () {
dataRows2.push({
'vote': parseFloat($(this).find('.vote').text()),
'row': $(this)
});
})
//Sort the data smallest to largest
dataRows1.sort(function (a, b) {
return b.vote - a.vote;
});
dataRows2.sort(function (a, b) {
return b.vote - a.vote;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
$('#pills-comedy table').empty();
$('#pills-horror table').empty();
//Add rows back to table in the correct order.
dataRows1.forEach(function (ele) {
$('#pills-comedy table').append(ele.row);
})
dataRows2.forEach(function (ele) {
$('#pills-horror table').append(ele.row);
})
};