使用制表符和 Javascript 对 A Table 进行排序
Sorting A Table With Tabs & Javascript
我希望有人能帮助我。我创建了一个 table 并且有多个选项卡。每个 Tab 在 table 内有不同的数据。每个 table 行都有一个包含投票数的列，我想自动对行进行排序，其中投票数较多的列位于顶部。
这是我的 HTML 代码：
<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">,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>
这是我用来按投票列排序的 Javacript 代码
$(document).ready(function(e) {
var dataRows = [];
//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.
$('tr').each(function(i, j) {
dataRows.push({ 'vote': parseFloat($(this).find('.vote').text()), 'row': $(this) });
})
//Sort the data smallest to largest
dataRows.sort(function(a, b) {
return b.vote - a.vote;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
$('table').empty();
//Add rows back to table in the correct order.
dataRows.forEach(function(ele) {
$('table').append(ele.row);
})
});
所以我注意到，如果我 运行 这段代码确实按列排序，但它也会从 HORROR TAB 中删除 table 并放置在 COMEDY TAB 中并进行重复。如果我删除选项卡，那么一切都很好。所以某处的某些东西通过使用选项卡来扰乱排序，我只是无法弄清楚发生了什么。
我真的需要一些帮助，几天来我一直在努力解决这个问题。
谢谢大家
每个选项卡（喜剧和恐怖）都有单独的数组对我有用，所以您只需创建第二个数组并使用更具体的 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);
})
};
这符合您的预期，但至少在这里它仍然打破了一些 Bootstrap 布局，我不确定为什么现在需要深入研究它。
我希望有人能帮助我。我创建了一个 table 并且有多个选项卡。每个 Tab 在 table 内有不同的数据。每个 table 行都有一个包含投票数的列，我想自动对行进行排序，其中投票数较多的列位于顶部。
这是我的 HTML 代码：
<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">,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>
这是我用来按投票列排序的 Javacript 代码
$(document).ready(function(e) {
var dataRows = [];
//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.
$('tr').each(function(i, j) {
dataRows.push({ 'vote': parseFloat($(this).find('.vote').text()), 'row': $(this) });
})
//Sort the data smallest to largest
dataRows.sort(function(a, b) {
return b.vote - a.vote;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
$('table').empty();
//Add rows back to table in the correct order.
dataRows.forEach(function(ele) {
$('table').append(ele.row);
})
});
所以我注意到，如果我 运行 这段代码确实按列排序，但它也会从 HORROR TAB 中删除 table 并放置在 COMEDY TAB 中并进行重复。如果我删除选项卡，那么一切都很好。所以某处的某些东西通过使用选项卡来扰乱排序，我只是无法弄清楚发生了什么。
我真的需要一些帮助，几天来我一直在努力解决这个问题。 谢谢大家
每个选项卡（喜剧和恐怖）都有单独的数组对我有用，所以您只需创建第二个数组并使用更具体的 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);
})
};
这符合您的预期，但至少在这里它仍然打破了一些 Bootstrap 布局，我不确定为什么现在需要深入研究它。