使用标签和 Javascript 对表格进行排序

Question

我希望有人可以帮助我。我创建了一个表并有多个选项卡。每个选项卡在表内都有不同的数据。每个表格行都有一个带有投票数的列，我想自动对行进行排序，顶部有更多投票的列。

这是我的 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">$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>

这是我用来按投票列排序的 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 中删除表格并将其放置在 COMEDY TAB 中并进行重复。如果我删除标签，那么一切都很好。因此，某处的某些东西通过标签来干扰排序，我就是不知道发生了什么。

我真的需要一些帮助，这几天我一直在努力解决这个问题。 谢谢大家

Answer 1

为每个选项卡（喜剧和恐怖）设置单独的数组对我有用，因此您只需创建第二个数组并复制 javascript 函数，使用更具体的 JS 选择器。

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 布局，我不确定为什么现在需要深入研究。